小程序---菜單點擊效果

版權聲明：本文爲博主原創文章，未經博主允許不得轉載。 https://blog.csdn.net/Eileen_crystal/article/details/79880732

業務需求點擊多選。

網上找了很多方法，都是用不同的常量，然後改變值而達到選中的效果，你們有沒有想過很多選項的時候，怎麼處理。。無語，只能自己寫。

根據那種不太合理的思路思考，是否可以自己設定不同的常量，然後通過改變值來達到選中的效果了？

經過研究測試，得到一種較爲複雜，但是能實現的方法。代碼如下：

wxml:

 <view class='allTypeList'>
    <view class='allTypeTit'>{{}}類型</view>
    <block wx:for="{{typeList}}" wx:key="typeList" wx:for-index="index">
      <view class="{{_num == 1?'menu-blocking':'menu-block'}}" data-num="{{index}}" bindtap="clickNum">
        <view class="{{item.clas}} menu-name" data-cindex='{{index}}'  data-type='{{item.id}}' bindtap='chooseType'>{{item.name}}</view>
      </view>
    </block>
  </view>

其中特別注意的是 ：
1, class=”{{item.clas}} ，這個clas 就是樣式。
2, data-cindex=’{{index}}’ 下標。

js:

data:{
types: "", //類型
//clas 其實就是樣式
typeList: [   
      { id: 1, name: "天包", clas: '' },
      { id: 2, name: "整包", clas: '' },
      { id: 3, name: "量包", clas: '' }
],
}

基本都有註釋，types 存選中項的值，typeList 是數據源，其中 clas 就是樣式，現在是空，通過下面的方法，賦值。

核心 js：

//菜單點擊效果及數據 -- 類型
 chooseType: function (e) { 
    var type = e.currentTarget.dataset.cindex; //獲取點中的參數

    //初始化數據值
    var str = ''; 
    if (this.data.types != '') {
      str = this.data.types;
    }

    //修改新的數據
    var sss = this.data.typeList[type];
    if (sss.clas == '') {
      sss.clas = "menu-name-active";
      str += "[" + sss.id + "],"       //新增
    } else {
      sss.clas = "";
      var vstr = "[" + sss.id + "],"
      str = str.replace(vstr, '');    //替換空
    }

    //重寫新的數據
    var strs = [];
    if (this.data.typeList != null) {
      strs = this.data.typeList
    }
    strs.splice(type, 1, sss); //移除在添加

    //賦值
    this.setData({
      typeList: strs,
      types: str
    })
  }
})

chooseType方法調用可看wxml中，可找到。複製上面代碼，可自行測試。

— 新接觸小程序，很多不熟練，這是自己寫的方法，可能複雜了點，有大神有簡單方法，留個言，一起研究。