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

Analyse und Behandlung von Bildlaufleisten in HTML und eingebettetem Flash

Bei der Entwicklung begegnen wir häufig dieser Sit...

So fügen Sie einer großen MySQL-Tabelle eine Spalte hinzu

Die Frage wird hier zitiert: https://www.zhihu.co...

MySQL-Lerndatenbank-Suchanweisung DQL Xiaobai Kapitel

Inhaltsverzeichnis 1. Einfacher Datenabruf 2. Dat...

Zusammenfassung der Erfahrungen und Fähigkeiten im Webdesign

■ Planung des Website-Themas Achten Sie darauf, da...

Informationen zur Verwendung der Vue v-on-Direktive

Inhaltsverzeichnis 1. Auf Ereignisse achten 2. Üb...

jQuery benutzerdefinierter Lupeneffekt

In diesem Artikelbeispiel wird der spezifische Co...

Beispiel-Tutorial zur Verwendung der Summenfunktion in MySQL

Einführung Heute werde ich die Verwendung der Sum...

So verweisen Sie im WeChat-Applet wxss auf externe CSS-Dateien und Iconfonts

Ursache So importieren Sie externe Dateien in ein...

Umfassende Erklärung zu dynamischem SQL von MyBatis

Inhaltsverzeichnis Vorwort Dynamisches SQL 1. Sch...

Grafisches Tutorial zur Installation und Konfiguration von MySQL Server 5.7.20

Dieser Artikel zeichnet die Installations- und Ko...

Lösung zum Verhindern des Caching in Seiten

Lösung: Fügen Sie in <head> den folgenden Co...

MySQL extrahiert zufällig eine bestimmte Anzahl von Datensätzen

Früher habe ich zur Handhabung dieser Art von Nut...

Warum MySQL große Transaktionen vermeiden sollte und wie man sie löst

Was ist eine große Sache? Transaktionen, die über...