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

Detailed method of using goaccess to analyze nginx logs

Recently I want to use goaccess to analyze nginx ...

Analyze the duration of TIME_WAIT from the Linux source code

Table of contents 1. Introduction 2. First, let&#...

Will Update in a Mysql transaction lock the table?

Two cases: 1. With index 2. Without index Prerequ...

Vue implements two-way data binding

This article example shares the specific code of ...

HTML table only displays the outer border of the table

I would like to ask a question. In Dreamweaver, I...

How to ensure the overall user experience

Related Articles: Website Design for User Experien...

Why not use UTF-8 encoding in MySQL?

MySQL UTF-8 encoding MySQL has supported UTF-8 si...

Vue implements table paging function

This article example shares the specific code of ...

Install and use Git and GitHub on Ubuntu Linux

Introduction to Git Git is an open source version...

How to run MySQL using docker-compose

Directory Structure . │ .env │ docker-compose.yml...

Detailed explanation of using pt-heartbeat to monitor MySQL replication delay

pt-heartbeat When the database is replicated betw...

CSS Tricks to Create Wave Effects

It has always been very difficult to achieve wave...