この記事では、ミニプログラムで製品属性選択または仕様選択を実装するための具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 成果を達成する 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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: WindowsでiTunesのバックアップパスを変更する方法
>>: MySQL で乱数を生成し、文字列を連結する方法の例
ログイン dockerログインdocker login コマンドを実行し、ユーザー名、パスワード、メ...
開発環境ウィンドウ開発ツール Visual Studio Codeノードのインストールとnpm Wi...
参考までに、シンプルなナンバープレート入力コンポーネント(vue)です。具体的な内容は次のとおりです...
背景:場合によっては、json データをページに直接表示する必要があります (たとえば、インターフェ...
特定のデータの一括更新処理において、特定のステータスが固定値に更新されるなど、更新するフィールドの値...
私は長い間この問題に悩まされていましたが、検索してみたところ、実際にこの問題を解決した人がいることが...
上部のメニュー バーに検索ボックスを配置するのは一般的なシナリオですが、検索機能がそれほど頻繁に使用...
1. 背景一般的に、データ ウェアハウス環境では、row_number 関数を使用して特定のディメン...
目次定期的に剪定するミラーエビクションコンテナのクリーンアップネットワークソート体積の蒸発完全にクリ...
インターネット上には、正しい方法であっても、使用しても正しい結果が得られない方法が数多くあります。正...
重複キーの置換と挿入の違い置換の使用法競合がない場合、挿入と同等となり、他の列のデフォルト値が使用さ...
目次テーマを動的に変更する最初の方法: 動的コンポーネント2番目の方法はルーティング分離です要約する...
導入:この記事では主に、Linux システムで IPV6 接続をサポートするように MySQL を構...
Tencent QQのホームページがリニューアルされ、Webフロントエンド開発がますます注目を集めて...
目次序文: Ubuntu 18.04 は apt ソースを Alibaba Cloud ソースに変更...