注册登录

小程序实现多个按钮toggle功能

2020-09-28
导读: 百度上很多都是只设置一个按钮的toggle,所以我现在来稍微总结下:多个按钮如何实现自身的toggle功能。 原理:1,列表展示的时候,我们会用wx:...

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

原理:1,列表展示的时候,我们会用wx:for 来循环数据,那么我们就会得到相应的当前的第几个数据(即 wx:key="index")
2.在每一个数据里面添加一个toggle的属性,toggle=false 则不展示,
3.设置一个点击方法,获取当前按钮所在的是第几个数据,然后将相应的toggle取反,然后将修改后的数据重新写进去 (我出错的地方就在这)
4. 在wxml页面判断toggle的值是true/false ,然后修改相应的class名
js代码:

小程序实现多个按钮toggle功能


  1. Page({
  2. data:{
  3. datas:[]
  4. },
  5. onLoad:function(options){
  6. var that=this;
  7. API.my_ajax('',function(res){ //用mock.js 设置的模拟数据调用格式
  8. // console.log(res);
  9. var listData=res.data;
  10. for(var i=0;i
  11. listData[i]['toggle']=false; //添加toggle 属性
  12. }
  13. that.setData({
  14. datas:listData
  15. })
  16. // console.log(listData)
  17. })
  18. },
  19. showBtn:function(e){
  20. console.log(e);
  21. console.log(this);
  22. //这两个console.log 可以查看当前方法里面所有的数据,可以查找一下我们所需要的内容是否有在里面,底下的index 就是这样找到的
  23.  
  24. var a=e.currentTarget.dataset.index;
  25. var b=this.data.datas[a].toggle;
  26. this.data.datas[a].toggle=!b;
  27.  
  28. //设置之后我们要把数据从新添回去
  29. this.setData({
  30. datas:this.data.datas
  31. })
重磅推荐:小程序开店目录

第一部分:小商店是什么

第二部分:如何开通一个小商店

第三部分:如何登录小商店

第四部分:开店任务常见问题

第五部分:小商店可以卖什么

第六部分:HiShop小程序特色功能

第七部分:小程序直播

第八部分:小程序收货/物流

第九部分:小程序怎么结算

第十部分:小程序客服

第十一部分:电商创业

第十二部分:小程序游戏开发

电话咨询 微信咨询 预约演示 0元开店