返回

提供微商城·微分销·小程序开店需求

5分钟开通你的微信商城店铺!
HiShop > Hi小程序 > 小程序热门 >

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

2020-09-28 作者:秩名

百度上很多都是只设置一个按钮的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. })

推荐文章

微分销 产品资料 领取开店礼包 免费体验
门店管理 裂变获客 商城开发 免费注册