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
Recently I want to use goaccess to analyze nginx ...
Table of contents 1. Introduction 2. First, let...
Two cases: 1. With index 2. Without index Prerequ...
This article example shares the specific code of ...
Overview Prometheus is an open source service mon...
I would like to ask a question. In Dreamweaver, I...
Related Articles: Website Design for User Experien...
MySQL UTF-8 encoding MySQL has supported UTF-8 si...
This article example shares the specific code of ...
Introduction to Git Git is an open source version...
Directory Structure . │ .env │ docker-compose.yml...
Table of contents v-model .sync The difference in...
This article uses an example to describe how to u...
pt-heartbeat When the database is replicated betw...
It has always been very difficult to achieve wave...