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

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

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

成果を達成する

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 で乱数を生成し、文字列を連結する方法の例

推薦する

MySQL接続がハングする理由の詳細な説明

目次1. 背景建築問題現象2. 分析プロセス接続プール不安に陥る雲を晴らして光を見よう3. 解決策I...

MongoDB データベースの状態を監視する Zabbix3.4 メソッド

Mongodb には db.serverStatus() コマンドがあり、これを使用して Mongo...

JavaScriptのイベントループの仕組みの分析

目次序文: 1. イベント ループとタスク キューの理由: 2. イベントループメカニズム: 3. ...

mysql5.7.19 解凍版の詳細なインストール チュートリアル (純粋なクラックされた中国語版 SQLYog を使用)

Mysql5.7.19バージョンは今年リリースされた新しいバージョンです。最近のMySQLのバージ...

vite2.0+vue3 モバイルプロジェクトの詳細な説明

1. 関連する技術的なポイントバイト版ヴュー3 ts統合ルーティングvuexを統合するAxiosを統...

MAC で Mysql5.7.10 のルートパスワードを変更する方法

まず、MySQLをskip-grant-tablesモードで起動します: mysqld --skip...

Nginx 7層負荷分散のいくつかのスケジューリングアルゴリズムの簡単な理解

この記事は主に、Nginx 7 層負荷分散のいくつかのスケジューリング アルゴリズムを紹介します。こ...

フォームの送信イベントが応答しない

1. 問題の説明<br />JS を使用してフォームの送信メソッドを呼び出してフォームを...

Docker で ElasticSearch をデプロイする方法

1. ElasticSearch とは何ですか? Elasticsearch も Java で開発さ...

Node.js で Bash スクリプトを書くための究極のソリューション

目次序文zxライブラリ$`コマンド` CD()フェッチ()質問()寝る()スローしない()チョークフ...

ボタンを使用してフォームを送信する代わりに、画像を使用してフォームを送信します。

コードをコピーコードは次のとおりです。 <フォームメソッド="post" ...

MySQL explain クエリ命令情報の取得原理と例

explain はクエリ実行プラン情報を取得するために使用されます。 1. 文法次のように、sele...

Tencent インタビュー: SQL ステートメントの実行が非常に遅くなる理由は何ですか? ---後悔シリーズは見ないで(推奨)

正直に言うと、この質問には MySQL のコア知識がかなり必要で、コンピュータ ネットワークの知識を...

Dockerがログファイルを保存する場所の詳細な説明

目次ログはどこに保存されますか?コンテナ内のアプリケーションからのログを表示するDockerデーモン...

ネイティブ JS 音楽プレーヤー

この記事の例では、音楽プレーヤーを実装するためのJSの具体的なコードを参考までに共有しています。具体...