forループを使用してアイテムのクリックイベントをバインドするミニプログラムの実装

この記事では、for ループを使用して項目をバインドするミニ プログラムのクリック イベントの実装を主に紹介します。必要な友達に参照してもらえるようにしました。 WeChat 表示リスト効果のヘルプ wx:for

では、リストを (wxml ファイル内で) 書き込むだけです:

対応するデータソース (js ファイル内):

Writeクリックリスナー:

Effect:

上記はリスト内の項目をクリックした効果を実現できます

が、クリックされた項目に対応するデータソースデータは取得できません

解決策:

クリックイベントコンポーネントに data-any 属性を追加します。 any 属性には任意のデータ型を指定できます。

以下の図からわかるように、expertData 配列を走査し、2 行目の最後に

data-bean="{{info}}"

という文を追加します。

次に、クリックイベントを変更します：

このメソッドを使用して、クリックされたアイテムに対応するデータオブジェクトと、オブジェクト内の特定の属性値を削除できることがわかりました

コンソールの印刷情報：

このようにして、一覧表示データ内の特定の値を取得することができます。 項目に対応するデータです。

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連おすすめ:

ミニプログラムのページには9マスグリッドとアイテムジャンプの機能が実装されています

ミニプログラムのスワイパーコンポーネントを使用してカルーセル機能を実現する方法

以上がforループを使用してアイテムのクリックイベントをバインドするミニプログラムの実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。