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

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

如下

实现效果

1.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>

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

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