This article shares the specific code for implementing product attribute selection or specification selection in a mini program for your reference. The specific content is as follows Achieve results 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: { //Data list: [ { "goods_option_id": 1737, "option_id": 1737, "name": "Ice Degree", "option_value": [ { "goods_option_value_id": 3606, "option_value_id": 3606, "name": "Normal Ice", "image": "xxxxxx.png" }, { "goods_option_value_id": 3605, "option_value_id": 3605, "name": "Shao Bing", "image": "xxxxxx.png" }, { "goods_option_value_id": 3604, "option_value_id": 3604, "name": "Hot Drinks", "image": "xxxxxx.png" } ] }, { "goods_option_id": 1738, "option_id": 1738, "name": "Sugar Content", "option_value": [ { "goods_option_value_id": 3608, "option_value_id": 3608, "name": "Normal Sugar", "image": "xxxxxx.png" }, { "goods_option_value_id": 3607, "option_value_id": 3607, "name": "Less Sugar", "image": "xxxxxx.png" } ] }, { "goods_option_id": 1737, "option_id": 1737, "name": "Ice Degree", "option_value": [ { "goods_option_value_id": 3606, "option_value_id": 3606, "name": "Normal Ice", "image": "xxxxxx.png" }, { "goods_option_value_id": 3605, "option_value_id": 3605, "name": "Shao Bing", "image": "xxxxxx.png" }, { "goods_option_value_id": 3604, "option_value_id": 3604, "name": "Hot Drinks", "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 }) }); } The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: How to modify iTunes backup path under Windows
>>: Example of how to generate random numbers and concatenate strings in MySQL
This article introduces the sample code of CSS3 c...
Preface Under the influence of some CSS interacti...
the difference: 1. InnoDB supports transactions, ...
The essence of a flat website structure is simpli...
Effect Preview Ideas Scroll the current list to t...
How can we say that we should avoid 404? The reas...
Table of contents Achieve results Implementation ...
Website compatibility debugging is really annoyin...
1. Effect display An astronaut watch face written...
Modify the group to which a user belongs in Linux...
Write at the beginning This article only covers E...
Table of contents Simple Factory Factory Method S...
1. Official Introduction grep is a commonly used ...
Table of contents 1. Create a table 1.1. Basic sy...
Preface In most projects, you will encounter onli...