html

<view class="selectsize_content">
<block wx:for="{{properties}}" wx:key="item" wx:for-index="id">
 <view class="content_title">{{item.name}}</view>
  <view class='content_list'>          
      <block wx:for="{{item.childsCurGoods}}" wx:key="items">
           <text class="{{ item.isSelect?'active':''}}" data-select-index="{{id}}"  data-attr-index="{{index}}" data-content="{{properties}}" bindtap='clickMenu'>{{item.name}}</text>
       </block>
   </view>
</block>
</view>

注：{{properties}} 为多个商品属性的详情，通过接口获取，

数据如下：

list.png

js

clickMenu: function (event) {
   let that = this
    // console.log(event)
    let selectIndex = event.currentTarget.dataset.selectIndex; 
    let attrIndex = event.currentTarget.dataset.attrIndex;  
    let content = event.currentTarget.dataset.content
    var count = content[selectIndex].childsCurGoods.length;
    for (var i = 0; i < count; i++) {
      content[selectIndex].childsCurGoods[i].isSelect = false
    }
    content[selectIndex].childsCurGoods[attrIndex].isSelect = true;
    // 必须重新渲染数据----------为了添加isSelect属性
    that.setData({ 
      properties: content
    })
  },

css

.selectsize_content{
  width:100%;
  height:450rpx;
  border-bottom:2rpx solid lightgray;
}
.content_title{
    line-height:100rpx;
    margin-left:20rpx;
}
.content_list{
  line-height:100rpx;
  margin-left:20rpx;
}
.content_list text{
  padding:20rpx;
  border:2rpx solid lightgray;
  margin-right:20rpx;
}
// 商品属性选中后
.active{
  border-color:red;
  color:red;
}