本文實例為大家分享了微信小程序實現商品屬性聯動選擇的具體代碼，供大家參考，具體內容如下

效果演示：

代碼示例

1、commodity.xml

<!-- <view class="title">屬性值聯動選擇</view>  --><!--options--><view class="commodity_attr_list">   <!--每組屬性-->  <view class="attr_box" wx:for="{{attrValueList}}" wx:for-item="attrValueObj" wx:for-index="attrIndex">    <!--屬性名-->   <view class="attr_name">{{attrValueObj.attrKey}}</view>     <!--屬性值-->   <view class="attr_value_box">      <!--每個屬性值-->     <view class="attr_value {{attrIndex==firstIndex || attrValueObj.attrValueStatus[valueIndex]?(value==attrValueObj.selectedValue?'attr_value_active':''):'attr_value_disabled'}}" bindtap="selectAttrValue" data-status="{{attrValueObj.attrValueStatus[valueIndex]}}"     data-value="{{value}}" data-key="{{attrValueObj.attrKey}}" data-code="{{attrCode}}" data-index="{{attrIndex}}" data-selectedvalue="{{attrValueObj.selectedValue}}" wx:for="{{attrValueObj.attrValues}}" wx:for-item="value" wx:for-index="valueIndex">{{value}}</view>    </view>  </view> </view> <!--button--><view class="weui-btn-area">   <button class="weui-btn" bindtap="submit">選好了    </button> </view> 

上述代碼把頁面盒子分為兩部分commodity_attr_list和weui-btn-area。
commodity_attr_list：循環獲取商品的屬性名和相對應的屬性值，并布局頁面。
weui-btn-area：提交校驗并獲取選中商品屬性結果。

2、commodity.js

數據結構

//數據結構：以一組一組的數據來進行設定   commodityAttr: [   {    priceId: 1,    price: 35.0,    "stock": 8,    "attrValueList": [     {      "attrKey": "規格：",      "attrValue": "+免費配料",      "attrCode": "1001"     },     {      "attrKey": "甜度：",      "attrValue": "七分甜",      "attrCode": "2001"     },     {      "attrKey": "加料：",      "attrValue": "珍珠",      "attrCode": "3001"     },     {      "attrKey": "冰塊：",      "attrValue": "少冰",      "attrCode": "4001"     }    ]   },   {    priceId: 2,    price: 35.1,    "stock": 9,    "attrValueList": [     {      "attrKey": "規格：",      "attrValue": "+燕麥",      "attrCode": "1002"     },     {      "attrKey": "甜度：",      "attrValue": "五分甜",      "attrCode": "2002"     },     {      "attrKey": "加料：",      "attrValue": "椰果",      "attrCode": "3002"     },     {      "attrKey": "冰塊：",      "attrValue": "去冰",      "attrCode": "4002"     }    ]   },   {    priceId: 3,    price: 35.2,    "stock": 10,    "attrValueList": [     {      "attrKey": "規格：",      "attrValue": "+布丁",      "attrCode": "1003"     },     {      "attrKey": "甜度：",      "attrValue": "無糖",      "attrCode": "2003"     },     {      "attrKey": "加料：",      "attrValue": "仙草",      "attrCode": "3003"     },     {      "attrKey": "冰塊：",      "attrValue": "常溫",      "attrCode": "4003"     }    ]   },   {    priceId: 4,    price: 35.2,    "stock": 10,    "attrValueList": [     {      "attrKey": "規格：",      "attrValue": "再加一份奶霜",      "attrCode": "1004"     },     {      "attrKey": "甜度：",      "attrValue": "無糖",      "attrCode": "2003"     },     {      "attrKey": "加料：",      "attrValue": "仙草",      "attrCode": "3004"     },     {      "attrKey": "冰塊：",      "attrValue": "熱飲",      "attrCode": "4004"     }    ]   },   {    priceId: 5,    price: 35.2,    "stock": 10,    "attrValueList": [     {      "attrKey": "規格：",      "attrValue": "+免費配料",      "attrCode": "1004"     },     {      "attrKey": "甜度：",      "attrValue": "五分甜",      "attrCode": "2003"     },     {      "attrKey": "加料：",      "attrValue": "椰果",      "attrCode": "3004"     },     {      "attrKey": "冰塊：",      "attrValue": "常溫",      "attrCode": "4004"     }    ]   }  ],  attrValueList: [] }