ミニプログラムにより、製品属性の選択や仕様の選択が可能

ミニプログラムにより、製品属性の選択や仕様の選択が可能

この記事では、ミニプログラムで製品属性選択または仕様選択を実装するための具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

成果を達成する

1.wxml

<view wx:for="{{list}}" wx:key="index" wx:key="index" wx:for-index="childIndex" style="margin: 40px 0">
  <ビュー>{{アイテム名}}</ビュー>
 
 
  <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}}
   </テキスト>
  </ビュー>
</ビュー>

2.js

データ: {
 //データリスト: [
   {
    "商品オプションID": 1737,
    "オプションID": 1737,
    "name": "氷度",
    "オプション値": [
     {
      「商品オプション値ID」: 3606,
      "オプション値ID": 3606,
      "name": "通常の氷",
      "画像": "xxxxxx.png"
     },
     {
      「商品オプション値ID」: 3605,
      "オプション値ID": 3605,
      "名前": "シャオ・ビン",
      "画像": "xxxxxx.png"
     },
     {
      「商品オプション値ID」: 3604,
      "オプション値ID": 3604,
      "name": "ホットドリンク",
      "画像": "xxxxxx.png"
     }
    ]
   },
   {
    「商品オプションID」: 1738,
    "オプションID": 1738,
    "name": "糖分含有量",
    "オプション値": [
     {
      「商品オプション値ID」: 3608,
      "オプション値ID": 3608,
      "name": "普通の砂糖",
      "画像": "xxxxxx.png"
     },
     {
      "商品オプション値ID": 3607,
      "オプション値ID": 3607,
      "name": "砂糖控えめ",
      "画像": "xxxxxx.png"
     }
    ]
   },
   {
    "商品オプションID": 1737,
    "オプションID": 1737,
    "name": "氷度",
    "オプション値": [
     {
      「商品オプション値ID」: 3606,
      "オプション値ID": 3606,
      "name": "通常の氷",
      "画像": "xxxxxx.png"
     },
     {
      「商品オプション値ID」: 3605,
      "オプション値ID": 3605,
      "名前": "シャオ・ビン",
      "画像": "xxxxxx.png"
     },
     {
      「商品オプション値ID」: 3604,
      "オプション値ID": 3604,
      "name": "ホットドリンク",
      "画像": "xxxxxx.png"
     }
    ]
   }
  ]、
  編曲: [],
  インデックスArr: []
 },

選択(e) {
  定数 fid = e.currentTarget.dataset.fid;
   定数 id = e.currentTarget.dataset.id;
  定数 arr = this.data.arr,
     arr2 = this.data.indexArr;
    
   arr[fid] = this.data.list[fid].option_value[id].name;
  arr2[fid] = id;

  this.setData({
   アーー ...
   インデックスArr: arr2
  })
 },
 
 onLoad: 関数 (オプション) {
  const res = this.data.indexArr;
  this.data.list.forEach((e,i) => {
   0 を返します。
   this.setData({
    インデックスArr:res
   })
  });
 }

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • WeChatアプレットが商品属性の連携選択を実現
  • WeChatミニプログラム製品詳細ページ仕様属性選択サンプルコード

<<:  WindowsでiTunesのバックアップパスを変更する方法

>>:  MySQL で乱数を生成し、文字列を連結する方法の例

推薦する

HTML文書の基本構造(Webページ作成の基礎知識)

HTMLの動作原理: 1. ローカル操作: ブラウザでhtmlファイルを開く2. リモートアクセス...

MySQL のロックに関する問題

ロックの分類:データ操作の粒度から:テーブルロック:操作時にテーブル全体がロックされます。行ロック:...

WeChatアプレットで画像の幅と高さを取得する方法

起源最近、私は要件 A に取り組んでいます。そこには、次のように記述される小さな機能ポイントがありま...

CSSをiPhoneのフルスクリーンに適応させる方法

1. メディアクエリ方式 /*iPhone X への適応*/ @media 画面のみ、(デバイス幅:...

Centos7.3 での mysql5.7 のインストールと設定のチュートリアル

この記事では、MySQL 5.7のインストールと設定のチュートリアルを参考までに紹介します。具体的な...

CSS 属性値正規マッチングセレクターの使い方 (ヒント)

属性値の正規一致セレクターには 3 つの種類があります。 [属性^="値"] [...

学生情報管理システムを実装するためのJavaScript+HTML

目次1. はじめに2. レンダリング3. コード4. 学生情報管理システムのメインインターフェース1...

mysqlは複数の主キーを設定する操作を実装します

ユーザーテーブル、ID番号は一意である必要があります、携帯電話番号、電子メールアドレスは一意である必...

Linux でテキストを表示するためのヒント (非常に実用的!)

序文日常の開発では、サーバー上でさまざまなテキストやログの表示操作を実行する必要があることがよくあり...

Web デザイン TabIndex 要素

TabIndex は、Tab キーを押して、定義された TabIndex 要素を順番に取得し、各要素...

CSS ラベルモード表示プロパティの詳細な説明

コードは次のようになります。 <!DOCTYPE html> <html> ...

HTM と HTML の違いは何ですか? HTM と HTML の違いは何ですか?

Web デザインを学習する過程で、html と htm の関係など、遭遇した多くの問題について深く...

MySQL パフォーマンス チューニングについて知っておくべき 15 個の重要な変数 (要約)

序文: MYSQL は最も人気のある WEB バックエンド データベースです。最近、NOSQL がま...

Linux whatisコマンドの使い方

01. コマンドの概要whatis コマンドは、システム コマンドの簡単な説明を含むいくつかの特別な...

JavaScript 型検出方法の例のチュートリアル

序文JavaScriptはWebフロントエンドで広く使われている言語の一つであり、Webアプリケーシ...