微信小程序实现多个按钮toggle功能的实例
2017-06-13 09:14
1061 查看
微信小程序实现多个按钮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>
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
您可能感兴趣的文章:
- 微信小程序实现动态设置页面标题的方法【附源码下载】
- 微信小程序 input输入及动态设置按钮的实现
- 微信小程序 动态的设置图片的高度和宽度详解及实例代码
- 微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
- 微信小程序基于slider组件动态修改标签透明度的方法示例
- 微信小程序 实现动态显示和隐藏某个控件
- 微信小程序 动态绑定事件并实现事件修改样式
- 微信小程序 JS动态修改样式的实现代码
- 微信小程序 实现列表项滑动显示删除按钮的功能
- 微信小程序组件 contact-button(客服会话按钮)详解及实例代码
- 微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
相关文章推荐
- 微信小程序,实现多个按钮toggle功能
- 微信小程序 支付功能实现PHP实例详解
- 微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
- 微信小程序开发详解---小知识,大功能【实现按钮的随着手指移动】
- 微信小程序实现之手势锁功能实例代码
- 微信小程序 实现列表项滑动显示删除按钮的功能
- 微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
- 微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
- 微信小程序实现即时通信聊天功能的实例代码
- 微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
- 微信小程序实现图片上传功能实例(前端+PHP后端)
- 微信小程序16---悬浮按钮的实现
- 微信小程序之ES6与事项助手的功能实现
- 微信小程序记账应用实例课程(三)服务端实现账目CRUD
- 微信小程序 scroll-view组件实现列表页实例代码
- 微信小程序 实现列表刷新的实例详解
- 微信小程序实现简单定位功能
- 微信小程序记账应用实例课程(三)服务端实现账目CRUD
- 微信小程序实例:实现tabs选项卡效果