微信小程序商品规格布局+样式+嵌套循环

只有红框框里的样式噢，请看下图→

功能：布局样式+循环点击变色+嵌套

WXML：

<!-- 商品规格 -->
<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-propertyId="{{item.propertyid}}:{{item.id}}" 
        data-content="{{properties}}" bindtap='clickMenu'>{{item.name}}</text>
      </block>
    </view>
  </block>
</view>

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

WXSS：

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

注：复制粘贴即可使用 (∩_∩)！

本文地址：https://blog.csdn.net/weixin_49519738/article/details/109388599