小程序多属性选择

效果图

wxml代码

<view class='wraps'>

  <view class='wrap' wx:for="{{options}}" wx:for-index="indexs" wx:for-item="oname">
    <view class='name'>{{oname.name}}</view>
    <view class='des'>
    
      <view class="{{item.checked?'active':'desitem'}}" wx:for="{{oname.items}}" catchtap="stoggle" data-parentindex="{{indexs}}" data-currentindex="{{index}}">
      
        {{item.msg}}
      
      </view>
      
      
    </view>
  </view>
  

</view>

wxss代码

.wraps{
  /* width: 100%; */
  padding: 20rpx;
}


.name{
 
  line-height: 100rpx;
}
.des{
  width: 100%;
  
  border: 1px solid #ccc;
  display: flex;
  /* flex-direction: row; */
  /* flex-wrap: wrap; */
}
.desitem{
  display: inline-block;
  background: #ccc;
  padding: 10rpx 20rpx;
  margin-right: 20rpx;
  border-radius: 10rpx;
  
 }
.active{
   background: #f00;
   color: #fff;
 }

JS代码

// pages/text4/text4.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

    options: [{
      items: [{
        'msg': '绿色',
        "id": "11",
        "chekced": true
      }, {
        'msg': "红色",
        "id": "12"
      }],
      name: "颜色"
    }, {
      items: [{
        'msg': "XXX",
        "id": "13"
      }, {
        'msg': "L",
        "id": "14"
      }, {
        'msg': "XXL",
        "id": "15"
      }],
      name: "型号"
    }, {
      items: [{
        'msg': "32G",
        "id": "16"
      }, {
        'msg': "8G",
        "id": "17"
      }, {
        'msg': "4G",
        "id": "18"
      }],
      name: "版本"
    }]
  },

  stoggle: function (e) {
    console.log(e);
    var parentIndex = e.currentTarget.dataset.parentindex;
    var currentIndex = e.currentTarget.dataset.currentindex;


    var options = this.data.options;



    for (var i = 0; i < options.length; i++) {

      if (i == parentIndex) {

        console.log(parentIndex);
        for (var j = 0; j < options[i].items.length; j++) {

          options[i].items[j].checked = false;
        }

        options[i].items[currentIndex].checked = true;
      }
    }

    console.log(options);
    this.setData({
      options: options
    })



  }


})