小程序开发:模拟购物车属性选择功能。
<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 }) }); }
放到开发软件里试试吧。
网友评论文明上网理性发言 已有0人参与
发表评论: