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

Referenzen und Referenzdetails in Vue3

Der Editor teilt Ihnen auch die entsprechenden Pr...

Tutorial zur Installation von Elasticsearch 7.6.2 in Docker

Docker installieren Sie müssen Docker installiere...

So installieren Sie den RabbitMQ-Server mit Yum auf CentOS

Socat muss vor der Installation von rabbitmq inst...

Beispiel für den Aufbau eines Jenkins-Dienstes mit Docker

Ziehen Sie das Bild root@EricZhou-MateBookProX: D...

Beispielerklärung von MySQL-Fremdschlüsseleinschränkungen

Die Fremdschlüsseleinschränkung von MySQL dient z...

So verwenden Sie js zur Kommunikation zwischen zwei HTML-Fenstern

Szenario: Wenn Seite A Seite B öffnet, muss Seite...

Anwendungsszenarien für React useMemo und useCallback

Inhaltsverzeichnis verwendenMemo useCallback verw...

Grafisches Tutorial zur Installation von CentOS7 auf VMware 15.5

1. Erstellen Sie eine neue virtuelle Maschine in ...

Vue implementiert die Tabellenpaging-Funktion

In diesem Artikelbeispiel wird der spezifische Co...

Tutorial zur Installation und Nutzungskonfiguration von Docker+nacos+seata1.3.0

Ich habe vorher einen Tag damit verbracht. Obwohl...

Beispielcode für CSS-Flex-Layout mit automatischem Zeilenumbruch

Um einen Flex-Container zu erstellen, fügen Sie e...

Detaillierte Erläuterung der Linux-Textverarbeitungstools

1. Zählen Sie die Anzahl der Benutzer, deren Stan...

Zusammenfassung der Fallstricke beim Importieren von OVA-Dateien in VMware

Quelle des Problems Wie wir alle wissen, erzeugt ...