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

CentOS 6 Kompilieren und installieren Sie ZLMediaKit-Analyse

Installieren Sie ZLMediaKit auf centos6 Der Autor...

Acht Beispiele, wie Vue Komponentenkommunikation implementiert

Inhaltsverzeichnis 1. Props übergeordnete Kompone...

Vue verwendet Regeln zur Implementierung der Formularfeldvalidierung

Es gibt viele Möglichkeiten, Formularfelder in Vu...

MySQL-Lerndatenbank-Suchanweisung DQL Xiaobai Kapitel

Inhaltsverzeichnis 1. Einfacher Datenabruf 2. Dat...

Zusammenfassung der Linux-Benutzergruppen und -Berechtigungen

Benutzergruppen Unter Linux muss jeder Benutzer e...

Tutorial zur Installation von MySQL unter CentOS7

Vor kurzem habe ich vor, eine Cloud-Festplatte au...

Zusammenfassung der Tipps zur CSS-Verwendung

Vor Kurzem habe ich mit der Aktualisierung meines ...

So stellen Sie Ihre erste Anwendung mit Docker bereit

Im vorherigen Artikel haben Sie Docker Desktop in...

Implementierung des WeChat-Applet-Nachrichten-Pushs in Nodejs

Auswählen oder Erstellen einer Abonnementnachrich...