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;
}
