この記事では、参考のために、ミニプログラムでカスタムのマルチレベル単一選択および複数選択機能を実装するための具体的なコードを共有します。具体的な内容は次のとおりです。 効果: 追伸:これはコンポーネントにカプセル化したカスタムドロップダウンボックスです wxml <view class="select-box"> <view class="select-title"> <view class="cell-border"> <van-field value="{{ layout }}" data-key="layout" placeholder="入力してください" required icon="arrow" label="ハウスタイプ" bind:tap="onChange" /> </ビュー> </ビュー> <view class="select-list" wx:if="{{show}}"> <view class="option" wx:for="{{layouts}}" wx:key="index"> <view class="{{curItem.checked ? 'option-item-active' : 'option-item'}}" wx:for="{{item.column}}" wx:key="インデックス" wx:for-item="現在のアイテム" データキー="{{curItem.key}}" データ-colkey="{{item.colKey}}" データ名="{{curItem.name}}" バインド:tap="getOptionItem"> {{curItem.name}} </ビュー> </ビュー> </ビュー> </ビュー> wxss .選択ボックス{ 幅: 100%; パディング: 20rpx; ボックスのサイズ: 境界線ボックス; } .セル境界{ 境界線の半径: 6rpx; 境界線: 1px 実線 #999; 下部マージン: 10rpx; } .選択リスト{ ディスプレイ: フレックス; flex-direction: 行; コンテンツの両端揃え: スペースを空ける; 幅: 100%; 高さ: 360rpx; パディング: 20rpx; ボックスのサイズ: 境界線ボックス; 背景色: #fff; 境界線: 1px 実線 #eee; } .選択リスト .オプション{ ディスプレイ: フレックス; flex-direction: 列; フォントサイズ: 24rpx; } .オプション項目{ 幅: 80rpx; 高さ: 100rpx; 背景色: #eee; テキスト配置: 中央; 上マージン: 5px; パディング: 2px; } .オプション項目アクティブ{ 幅: 80rpx; 高さ: 100rpx; 背景色: #FF6600; テキスト配置: 中央; 上マージン: 5px; パディング: 2px; 色:#fff; } json { 「コンポーネント」:true、 "コンポーネントの使用": { "van-field": "../../vant/field/index", } } js ps:dataはコンポーネント自体のデータであり、layoutsはデータソースです 成分({ プロパティ: }, データ:{ 表示:false、 現在のキー:-1、 列キー:-1、 レイアウト:[ { 列キー:0, カラム:[ {名前:"部屋1",キー:0,}, {名前:"部屋2",キー:1,}, {name:"部屋3",キー:2,}, {name:"部屋4",key:3,}, {name:"部屋5",key:4,}, {name:"部屋6",key:5,} ] }, { 列キー:1、 カラム:[ {name:"ホール1",key:0,}, {name:"ホール2",key:1,}, {name:"ホール3",key:2,}, {name:"部屋4",key:3,}, {name:"ホール5",key:4,}, {name:"部屋6",key:5,} ] }, { 列キー:2, カラム:[ {名前:"1 キッチン",キー:0,}, {名前:"2 シェフ",キー:1,}, {名前:"3 シェフ",キー:2,}, {名前:"4 シェフ",キー:3,}, {名前:"5 シェフ",キー:4,}, {name:"6 シェフ",key:5,}] }, { 列キー:3, カラム:[ {name:"1 ガード",key:0,}, {name:"2 ガード",key:1,}, {name:"3 ガード",key:2,}, {name:"4 ガード",key:3,}, {name:"5 ガード",key:4,}, {name:"6 ガード",key:5,} ] }, { 列キー:4, カラム:[ {name:"1 バルコニー",key:0,}, {name:"2 バルコニー",key:1,}, {name:"3 バルコニー",key:2,}, {name:"4 バルコニー",key:3,}, {name:"5 バルコニー",key:4,}, {name:"6 バルコニー",key:5,} ] } ] }, 方法:{ オンチェンジ(){ const {show} = this.data; this.setData({ 表示:!表示 }) }, getOptionItem(イベント){ console.log("イベント",イベント) 定数キー = event.currentTarget.dataset.key; cK = event.currentTarget.dataset.colkey; 定数。 const {curKey、colKey、layouts} = this.data; this.setData({ curKey:キー、 列キー:cK }) // チェックされたフィールドを使用して、列間の単一選択と行間の複数選択を許可します layouts[cK].column.map(cur => { cur.checked = false を返します。 }) レイアウト[cK].column[キー].checked = true; this.setData({レイアウト}) } } }) 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL データベースにおける中国語文字化け問題の詳細な説明
>>: 仮想マシンUbuntu 16.04がインターネットに接続できない問題の解決策
この記事では主に、CSS3 フレックスレイアウトを使用して要素を均等に配置する方法を紹介します。自分...
1. Dockerコンテナを起動する以下のコマンドを使用して新しい Docker コンテナを起動しま...
多方向探索ツリー完全二分木の高さ: O(log2N)、ここで2は対数完全なM方向探索木の高さ: O(...
1. 新しいユーザーを作成します。 1. SQL ステートメントを実行して新しいものを作成します (...
tortoiseGit のインストール時にいつも問題があったので、単純に svn に変更しました。途...
ビューポートとはモバイル ブラウザは、Web ページを仮想の「ウィンドウ」(ビューポート) に配置し...
レプリケーションとは、マスター データベースの DDL および DML 操作をバイナリ ログを介して...
1. まずデータベースサーバーを停止しますサービスmysqld停止2.vim /etc/my.cnf...
Enctype : ブラウザがデータをサーバーに送り返すときに使用するエンコーディングのタイプを指定...
詳細な手順は次のとおりです。 1. ディスク容量を確認します。 [root@localhost バッ...
この記事では、例を使用して、MySQL ストアド プロシージャでの case ステートメントの使用方...
目次1. データソース2. データの総合順位1) 総合ランキング2) 同順位3) 同順位3. データ...
データベーストランザクション分離レベルデータベース トランザクションには、低から高まで 4 つの分離...
目次1. インストール前の準備、インストールパッケージのダウンロード1 インストールの準備2 インス...
フォームを入力不可にしたい場合は、フォームを次のように設定します。コードをコピーコードは次のとおりで...