Mini Programs enable product attribute selection or specification selection

Mini Programs enable product attribute selection or specification selection

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:
  • WeChat applet realizes linkage selection of product attributes
  • WeChat Mini Program Product Details Page Specification Attribute Selection Sample Code

<<:  How to modify iTunes backup path under Windows

>>:  Example of how to generate random numbers and concatenate strings in MySQL

Recommend

Example code for implementing card waterfall layout with css3 column

This article introduces the sample code of CSS3 c...

Specific use of stacking context in CSS

Preface Under the influence of some CSS interacti...

Differences between MySQL MyISAM and InnoDB

the difference: 1. InnoDB supports transactions, ...

How to use flat style to design websites

The essence of a flat website structure is simpli...

CSS3 achieves infinite scrolling/carousel effect of list

Effect Preview Ideas Scroll the current list to t...

17 404 Pages You'll Want to Experience

How can we say that we should avoid 404? The reas...

Element-ui directly clicks on the cell in the table to edit

Table of contents Achieve results Implementation ...

CSS code to distinguish ie8/ie9/ie10/ie11 chrome firefox

Website compatibility debugging is really annoyin...

How to modify the group to which a user belongs in Linux

Modify the group to which a user belongs in Linux...

Best Practices for Deploying ELK7.3.0 Log Collection Service with Docker

Write at the beginning This article only covers E...

JavaScript Factory Pattern Explained

Table of contents Simple Factory Factory Method S...

Detailed explanation of the usage of grep command in Linux

1. Official Introduction grep is a commonly used ...

Comprehensive summary of MYSQL tables

Table of contents 1. Create a table 1.1. Basic sy...

Vue-pdf implements online preview of PDF files

Preface In most projects, you will encounter onli...