如下圖所示，實現該按鈕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
    }) 
  }
})
 

<!--使用二維碼按鈕-->
            <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>