Miniprogramme ermöglichen die Auswahl von Produktattributen oder Spezifikationen

Miniprogramme ermöglichen die Auswahl von Produktattributen oder Spezifikationen

In diesem Artikel wird der spezifische Code zur Implementierung der Produktattributauswahl oder Spezifikationsauswahl in einem Miniprogramm zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Ergebnisse erzielen

1.wxml

<Ansicht wx:for="{{Liste}}" wx:key="index" wx:key="index" wx:for-index="childIndex" style="margin: 40px 0">
  <Ansicht>{{item.name}}</Ansicht>
 
 
  <Ansichtsklasse="s" wx:für="{{item.option_value}}" wx:key="index" >
   <text class="{{indexArr[childIndex] == index ? 'aktiv':''}}" bindtap="Auswahl" data-fid="{{childIndex}}" data-id="{{index}}">
    {{item.name}}
   </text>
  </Ansicht>
</Ansicht>

2.js

Daten: {
 //Datenliste: [
   {
    "goods_option_id": 1737,
    "option_id": 1737,
    "Name": "Eisgrad",
    "Optionswert": [
     {
      "Warenoptionswert-ID": 3606,
      "Optionswert-ID": 3606,
      "Name": "Normales Eis",
      "Bild": "xxxxxx.png"
     },
     {
      "Warenoptionswert-ID": 3605,
      "Optionswert-ID": 3605,
      "Name": "Shao Bing",
      "Bild": "xxxxxx.png"
     },
     {
      "Warenoptionswert-ID": 3604,
      "Optionswert-ID": 3604,
      "Name": "Heiße Getränke",
      "Bild": "xxxxxx.png"
     }
    ]
   },
   {
    "goods_option_id": 1738,
    "option_id": 1738,
    "Name": "Zuckergehalt",
    "Optionswert": [
     {
      "Warenoptionswert-ID": 3608,
      "Optionswert-ID": 3608,
      "Name": "Normaler Zucker",
      "Bild": "xxxxxx.png"
     },
     {
      "goods_option_value_id": 3607,
      "Optionswert-ID": 3607,
      "name": "Weniger Zucker",
      "Bild": "xxxxxx.png"
     }
    ]
   },
   {
    "goods_option_id": 1737,
    "option_id": 1737,
    "Name": "Eisgrad",
    "Optionswert": [
     {
      "Warenoptionswert-ID": 3606,
      "Optionswert-ID": 3606,
      "Name": "Normales Eis",
      "Bild": "xxxxxx.png"
     },
     {
      "Warenoptionswert-ID": 3605,
      "Optionswert-ID": 3605,
      "Name": "Shao Bing",
      "Bild": "xxxxxx.png"
     },
     {
      "Warenoptionswert-ID": 3604,
      "Optionswert-ID": 3604,
      "Name": "Heiße Getränke",
      "Bild": "xxxxxx.png"
     }
    ]
   }
  ],
  arr: [],
  indexArr: []
 },

Wahl(e) {
  const fid = e.currentTarget.dataset.fid;
   const id = e.currentTarget.dataset.id;
  const arr = diese.Daten.arr,
     arr2 = diese.Daten.indexArr;
    
   arr[fid] = diese.Daten.Liste[fid].Optionswert[id].Name;
  arr2[fid] = ID;

  dies.setData({
   arr: arr,
   indexArr: arr2
  })
 },
 
 onLoad: Funktion (Optionen) {
  const res = diese.Daten.indexArr;
  diese.Datenliste.fürJeden((e,i) => {
   res[i] = 0;
   dies.setData({
    indexArr:res
   })
  });
 }

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • Das WeChat-Applet realisiert die Verknüpfungsauswahl von Produktattributen
  • WeChat Mini-Programm Produktdetails Seite Spezifikation Attributauswahl Beispielcode

<<:  So ändern Sie den iTunes-Sicherungspfad unter Windows

>>:  Beispiel für die Generierung von Zufallszahlen und die Verkettung von Zeichenfolgen in MySQL

Artikel empfehlen

Detailliertes Tutorial zum Bereitstellen von Apollo mit Docker

1. Einleitung Ich werde hier nicht näher auf Apol...

HTML-Tutorial: Ungeordnete Liste

<br />Originaltext: http://andymao.com/andy/...

Detailliertes Tutorial zur Installation von mysql5.7.21 unter Windows

In diesem Artikel finden Sie das Installations-Tu...

Wie gut wissen Sie über die Vererbung in JavaScript?

Inhaltsverzeichnis Vorwort Die Beziehung zwischen...

Implementierung mehrerer Tomcat-Instanzen auf einer einzigen Maschine

1. Einleitung Zunächst müssen wir eine Frage bean...

Detaillierte JavaScript-Rekursion

Inhaltsverzeichnis 1. Was ist Rekursion? 2. Mathe...

MySQL bedingte Abfrage und/oder Verwendung und Priorität Beispielanalyse

Dieser Artikel veranschaulicht anhand von Beispie...

Vue implementiert einen Einkaufswagen, der die Einkaufsmenge ändern kann

In diesem Artikel erfahren Sie, wie Sie mit Vue d...

WeChat-Miniprogramm zur Implementierung elektronischer Signaturen

In diesem Artikel finden Sie den spezifischen Cod...

Detaillierte Erläuterung der Verwendung von MySQL Explain (Analyseindex)

EXPLAIN zeigt, wie MySQL Indizes verwendet, um Au...

Einführung in die Farbabstimmung von Königsblau für Webdesign

Klassische Farbkombinationen vermitteln Kraft und ...