微信小程序实现多个按钮toggle功能的实例


Posted in Javascript onJune 13, 2017

微信小程序实现多个按钮toggle功能的实例

如下图所示,实现该按钮toggle功能。

微信小程序实现多个按钮toggle功能的实例

百度上很多都是只设置一个按钮的toggle,所以我现在来稍微总结下:多个按钮如何实现自身的toggle功能。

原理:

1,列表展示的时候,我们会用wx:for 来循环数据,那么我们就会得到相应的当前的第几个数据(即 wx:key="index")

2.在每一个数据里面添加一个toggle的属性,toggle=false  则不展示,

3.设置一个点击方法,获取当前按钮所在的是第几个数据,然后将相应的toggle取反,然后将修改后的数据重新写进去 (我出错的地方就在这)

4. 在wxml页面判断toggle的值是true/false ,然后修改相应的class名

js代码:

Page({ 
 data:{ 
  datas:[] 
 }, 
 onLoad:function(options){ 
  var that=this; 
  API.my_ajax('',function(res){ //用mock.js 设置的模拟数据调用格式 
   // console.log(res); 
   var listData=res.data; 
   for(var i=0;i<listData.length;i++){ 
    listData[i]['toggle']=false; //添加toggle 属性 
   } 
   that.setData({ 
    datas:listData 
   }) 
   // console.log(listData) 
  }) 
 }, 
 showBtn:function(e){ 
  console.log(e);  
  console.log(this);  
 //这两个console.log 可以查看当前方法里面所有的数据,可以查找一下我们所需要的内容是否有在里面,底下的index 就是这样找到的 
 
  var a=e.currentTarget.dataset.index; 
  var b=this.data.datas[a].toggle; 
  this.data.datas[a].toggle=!b; 
 
  //设置之后我们要把数据从新添回去 
  this.setData({ 
   datas:this.data.datas 
  })  
 } 
})

wxml代码:

<!--使用二维码按钮--> 
      <label class="icon_qrcode_wrap" data-index="{{index}}" bindtap="showBtn"> 
        <text>使用规格及二维码</text> 
        <image class="icon_right" src="../../images/up.png"></image> 
      </label> 
 
      <!--弹出二维码样式--> 
      <view class="qrcode_show_wrap {{item.toggle==true ? '':'none'}}"> 
        <view class="qrcode_container"> 
          <!--<image class="qrcode_big_bg"src="../../images/qrcode_black_bg.png"></image>--> 
          <view class="block_qrcode_wrap"> 
            <image class="tiaoma" src="../../images/tiao_code.png"></image> 
            <image class="rqcode" src="../../images/rq_code_img.png"></image> 
            <text style="display:block;" class="fs12">erwr43545</text> 
          </view> 
          <text class="rq_code_title cfff fs13">使用规则</text> 
          <text class="cfff code_txt">就掉粉丝活生生的谁让他和人文就掉粉丝活生生的谁让他和人文就掉粉丝活生生的谁让他和人文</text> 
        </view> 
      </view> 
    </view>

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
jquery tools之tabs 选项卡/页签
Jul 25 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
Jan 23 Javascript
Ajax同步与异步传输的示例代码
Nov 21 Javascript
jQuery判断复选框是否勾选的原理及示例
May 21 Javascript
快速学习jQuery插件 Form表单插件使用方法
Dec 01 Javascript
jquery插件jquery.confirm弹出确认消息
Dec 22 Javascript
jQuery实现简单弹窗遮罩效果
Feb 27 Javascript
微信小程序实现滑动删除效果
May 19 Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
Aug 16 Javascript
JavaScript中字符串的常用操作方法及特殊字符
Mar 18 Javascript
SVG实现时钟效果
Jul 17 Javascript
vue.js的状态管理vuex中store的使用详解
Nov 08 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
Jun 13 #Javascript
微信小程序--组件(swiper)详细介绍
Jun 13 #Javascript
Vue.js实现微信过渡动画左右切换效果
Jun 13 #Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
Jun 13 #Javascript
基于pako.js实现gzip的压缩和解压功能示例
Jun 13 #Javascript
基于vue2框架的机器人自动回复mini-project实例代码
Jun 13 #Javascript
深究AngularJS中ng-drag、ng-drop的用法
Jun 12 #Javascript
You might like
smarty模板局部缓存方法使用示例
2014/06/17 PHP
PHP正则表达式替换站点关键字链接后空白的解决方法
2014/09/16 PHP
php快速查找数据库中恶意代码的方法
2015/04/01 PHP
基于PHP代码实现中奖概率算法可用于刮刮卡、大转盘等抽奖算法
2015/12/20 PHP
PHPCMS2008广告模板SQL注入漏洞修复
2016/10/11 PHP
Laravel中获取路由参数Route Parameters的五种方法示例
2017/09/29 PHP
超级简单的图片防盗(HTML),好用
2007/04/08 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
2014/02/23 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
2014/07/02 Javascript
解析JavaScript的ES6版本中的解构赋值
2015/07/28 Javascript
在React框架中实现一些AngularJS中ng指令的例子
2016/03/06 Javascript
AngularJS入门之动画
2016/07/27 Javascript
JavaScript数组去重的6个方法
2017/01/21 Javascript
HTML中使背景图片自适应浏览器大小实例详解
2017/04/06 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
2018/12/06 jQuery
js作用域和作用域链及预解析
2019/04/11 Javascript
[42:39]老党炸弹人试玩视频
2014/09/03 DOTA
python 日志增量抓取实现方法
2018/04/28 Python
详解Python3网络爬虫(二):利用urllib.urlopen向有道翻译发送数据获得翻译结果
2019/05/07 Python
python基于递归解决背包问题详解
2019/07/03 Python
Python测试Kafka集群(pykafka)实例
2019/12/23 Python
python爬虫开发之Request模块从安装到详细使用方法与实例全解
2020/03/09 Python
解决 jupyter notebook 回车换两行问题
2020/04/15 Python
python爬虫容易学吗
2020/06/02 Python
python + selenium 刷B站播放量的实例代码
2020/06/12 Python
深入浅析python 中的self和cls的区别
2020/06/20 Python
keras训练浅层卷积网络并保存和加载模型实例
2020/07/02 Python
Raffaello Network西班牙:意大利拉斐尔时尚购物网
2019/03/12 全球购物
英国健身超市:Fitness Superstore
2019/06/17 全球购物
质检的岗位职责
2013/11/17 职场文书
检查接待方案
2014/02/27 职场文书
2014年测量员工作总结
2014/12/12 职场文书
2015年医德医风工作总结
2015/04/02 职场文书
农民工工资保障承诺书
2015/05/04 职场文书
用Python远程登陆服务器的步骤
2021/04/16 Python
python析构函数用法及注意事项
2021/06/22 Python