小程序---菜单点击效果

业务需求点击多选。

网上找了很多方法，都是用不同的常量，然后改变值而达到选中的效果，你们有没有想过很多选项的时候，怎么处理。。无语，只能自己写。

根据那种不太合理的思路思考，是否可以自己设定不同的常量，然后通过改变值来达到选中的效果了？

经过研究测试，得到一种较为复杂，但是能实现的方法。代码如下：

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中，可找到。复制上面代码，可自行测试。

— 新接触小程序，很多不熟练，这是自己写的方法，可能复杂了点，有大神有简单方法，留个言，一起研究。