微信小程序实现商品属性联动选择

本文实例为大家分享了微信小程序实现商品属性联动选择的具体代码，供大家参考，具体内容如下

效果演示：

代码示例

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: [] }