微信小程序,实现多个按钮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>










  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值