小程序如何实现商品属性选择或规格选择功能

本篇内容主要讲解“小程序如何实现商品属性选择或规格选择功能”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“小程序如何实现商品属性选择或规格选择功能”吧!

如下

实现效果

wxml

<view wx:for="{{list}}" wx:key="index" wx:key="index" wx:for-index="childIndex" >  <view>{{item.name}}</view>    <view class="s" wx:for="{{item.option_value}}" wx:key="index" >   <text class="{{indexArr[childIndex] == index ? 'active':''}}" bindtap="choice" data-fid="{{childIndex}}" data-id="{{index}}">    {{item.name}}   </text>  </view></view>

js

data: { //数据  list: [   {    "Goods_option_id": 1737,    "option_id": 1737,    "name": "冰度",    "option_value": [     {      "goods_option_value_id": 3606,      "option_value_id": 3606,      "name": "正常冰",      "image": "xxxxxx.png"     },     {      "goods_option_value_id": 3605,      "option_value_id": 3605,      "name": "少冰",      "image": "xxxxxx.png"     },     {      "goods_option_value_id": 3604,      "option_value_id": 3604,      "name": "热饮",      "image": "xxxxxx.png"     }    ]   },   {    "goods_option_id": 1738,    "option_id": 1738,    "name": "糖度",    "option_value": [     {      "goods_option_value_id": 3608,      "option_value_id": 3608,      "name": "正常糖",      "image": "xxxxxx.png"     },     {      "goods_option_value_id": 3607,      "option_value_id": 3607,      "name": "少糖",      "image": "xxxxxx.png"     }    ]   },   {    "goods_option_id": 1737,    "option_id": 1737,    "name": "冰度",    "option_value": [     {      "goods_option_value_id": 3606,      "option_value_id": 3606,      "name": "正常冰",      "image": "xxxxxx.png"     },     {      "goods_option_value_id": 3605,      "option_value_id": 3605,      "name": "少冰",      "image": "xxxxxx.png"     },     {      "goods_option_value_id": 3604,      "option_value_id": 3604,      "name": "热饮",      "image": "xxxxxx.png"     }    ]   }  ],  arr: [],  indexArr: [] },choice(e) {  const fid = e.currentTarget.dataset.fid;   const id = e.currentTarget.dataset.id;  const arr = this.data.arr,     arr2 = this.data.indexArr;       arr[fid] = this.data.list[fid].option_value[id].name;  arr2[fid] = id;  this.setData({   arr: arr,   indexArr: arr2  }) },  onLoad: function (options) {  const res = this.data.indexArr;  this.data.list.forEach((e,i) => {   res[i] = 0;   this.setData({    indexArr: res   })  }); }

到此，相信大家对“小程序如何实现商品属性选择或规格选择功能”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！