小程序如何实现商品属性选择或规格选择功能
本篇内容主要讲解“小程序如何实现商品属性选择或规格选择功能”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“小程序如何实现商品属性选择或规格选择功能”吧!
如下
实现效果
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 }) }); }
到此,相信大家对“小程序如何实现商品属性选择或规格选择功能”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!