微信小程序,实现多个按钮toggle功能
来源:互联网 发布:淘宝买阿迪达斯是假的 编辑:程序博客网 时间:2024/05/29 15:56
如下图所示,实现该按钮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>
阅读全文
0 0
- 微信小程序,实现多个按钮toggle功能
- jQuery中toggle方法实现多个函数轮流执行
- Android程序:多按钮点击事件的常用功能实现
- 微信小程序 | 多个按钮或VIEW,点击改变状态 简易的实现方法
- 实现2个按钮的程序
- SDL实现多个按钮
- 微信小程序--多个按钮选中的联动效果
- 按钮功能的实现
- QT之在多个按钮中任选一个按钮,执行被选中的按钮功能
- android 自定义toggle Button按钮
- android 自定义toggle Button按钮
- Toggle Buttons(开关按钮)
- navigationItem.rightBarButtonItem 实现多个右侧按钮
- mfc 按钮 实现多个界面跳转
- navigationItem.rightBarButtonItem 实现多个右侧按钮
- 一个按钮实现上传多个图片
- jquery实现多个点击复制按钮
- 一个按钮实现上传多个图片
- jquery.validate 验证表单
- Protected internal 与 internal 、Protected的区别
- JEESZ分布式架构平台介绍
- 公共数据库介绍~英国卫报(The Guardian Data Store)
- angularjs的$watch、$watchGroup、$watchCollection
- 微信小程序,实现多个按钮toggle功能
- 八大基本类型
- Python基础——函数
- 移动APP漏洞自动化检测平台建设
- RN工程的一些坑
- 算法作业HW16:LeetCode121 Best Time to Buy and Sell Stock
- 转:深度学习笔记:优化方法总结(BGD,SGD,Momentum,AdaGrad,RMSProp,Adam)
- 如何在ubuntu系统下搭建一个opendaylight Beryllium版本环境
- 2017 计蒜之道 复赛 题解