この記事では、参考のために、ミニプログラムでカスタムのマルチレベル単一選択および複数選択機能を実装するための具体的なコードを共有します。具体的な内容は次のとおりです。 効果: 追伸:これはコンポーネントにカプセル化したカスタムドロップダウンボックスです 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がインターネットに接続できない問題の解決策
多くの場合、画像を表示する<a>タグのスタイルに遭遇しますが、タグ内にテキストがあり、そ...
最初のステップはmysqlコンテナを作成することです docker exec -it コンテナID ...
目次1. はじめに2. フィルター() 3. マップ() 4. ソート() 5. 減らす() 6. ...
CS: ...コードをコピーコードは次のとおりです。 *{マージン:0;パディング:0;リストスタイ...
Redisイメージをダウンロードする docker pull yyyyttttwww/redis を...
今では多くの人がウェブサイト作成に参加していますが、ウェブサイトはどのように作成すればよいのでしょう...
1. /etc/init.d ディレクトリに入ります: cd /etc/init.d 2. tomc...
ハイパーリンクの下線を削除するには、スタイルシート CSS を使用する必要があります。当面は CSS...
1. Compose の紹介Compose は、マルチコンテナ Docker アプリケーションを定義...
目次1. 関数を宣言する2. 関数の呼び出し3. 関数パラメータ4. 関数の戻り値5. 議論の使用6...
導入: AD は Active Directory の略称で、中国語では Active Direct...
ここで nginx のリバース プロキシを試してみましょう。リバースプロキシ方式とは、インターネット...
Kubernetes チームは最近、最新バージョンの Docker でサポートされている機能を廃止...
コードをコピーコードは次のとおりです。 <html> <ヘッド> <ス...
<br />それぞれのトピックについて、チーム内でメールで議論します。議論が白熱するにつ...