WeChatウィジェットの比較機能を実現する方法のまとめ(5つの方法)
2201 ワード
まずindex.wxmlページにテストページを書きます。
図のように:
コードは以下の通りです
次は比較機能の実現です。
第一の方法
まず、2つのinputコンポーネントの中で、bindchange方法でイベント処理関数をバインドし、buttonコンポーネントの中で、bindtapでイベント関数をバインディングする。
図のように
次にindex.jsで実現します。
コードは以下の通りです
ページ中の少量のinputコンポーネントに適用される場合
第二の方法
第二の方法は同じ関数を結合するための2つのinputコンポーネントです。
idとdatasetで元素を取得します。
1.idで取得する
コードの具体的な実装は以下の通りです。
2.datasetで要素を取得する
具体的なコードは下記の通り実現されます。
第三の方法
textコンポーネントに直接処理して計算ロジックを計算します。
具体的な実現コードは以下の通りです。
第四の方法
条件レンダリングによるサイズ比較
wx:ifまたはwx:if wx:elseを使って実現します。
または
第五の方法
フォームからinputコンポーネントの値を取得し、比較結果
実現コードは以下の通りです
最終的に成功した運転は以下の通りです。
締め括りをつける
ここでは、WeChatウィジェットの比較機能についてのまとめ(5つの方法)を紹介します。さらに関連するWeChatウィジェットの比較内容は、以前の文章を検索したり、下記の関連記事を見たりしてください。これからもよろしくお願いします。
図のように:
コードは以下の通りです
次は比較機能の実現です。
第一の方法
まず、2つのinputコンポーネントの中で、bindchange方法でイベント処理関数をバインドし、buttonコンポーネントの中で、bindtapでイベント関数をバインディングする。
図のように
次にindex.jsで実現します。
コードは以下の通りです
ページ中の少量のinputコンポーネントに適用される場合
第二の方法
第二の方法は同じ関数を結合するための2つのinputコンポーネントです。
idとdatasetで元素を取得します。
1.idで取得する
コードの具体的な実装は以下の通りです。
2.datasetで要素を取得する
具体的なコードは下記の通り実現されます。
第三の方法
textコンポーネントに直接処理して計算ロジックを計算します。
具体的な実現コードは以下の通りです。
第四の方法
条件レンダリングによるサイズ比較
wx:ifまたはwx:if wx:elseを使って実現します。
または
第五の方法
フォームからinputコンポーネントの値を取得し、比較結果
実現コードは以下の通りです
最終的に成功した運転は以下の通りです。
締め括りをつける
ここでは、WeChatウィジェットの比較機能についてのまとめ(5つの方法)を紹介します。さらに関連するWeChatウィジェットの比較内容は、以前の文章を検索したり、下記の関連記事を見たりしてください。これからもよろしくお願いします。