小程序实现商品属性选择或规格选择
程序员文章站
2022-03-02 23:39:38
本文实例为大家分享了小程序实现商品属性选择或规格选择的具体代码,供大家参考,具体内容如下实现效果1.wxml
本文实例为大家分享了小程序实现商品属性选择或规格选择的具体代码,供大家参考,具体内容如下
实现效果
1.wxml
<view wx:for="{{list}}" wx:key="index" wx:key="index" wx:for-index="childindex" style="margin: 40px 0"> <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 }) }); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: WebUploader实现图片上传功能
下一篇: jQuery实现简单的纯前端的购物车案例