ミニプログラムは、カスタムのマルチレベル単一選択と複数選択を実装します

ミニプログラムは、カスタムのマルチレベル単一選択と複数選択を実装します

この記事では、参考のために、ミニプログラムでカスタムのマルチレベル単一選択および複数選択機能を実装するための具体的なコードを共有します。具体的な内容は次のとおりです。

効果:

追伸:これはコンポーネントにカプセル化したカスタムドロップダウンボックスです

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • WeChat アプレットのラジオボタンのカスタム割り当て
  • WeChatアプレットでラジオチェックボックスのチェックとキャンセルを実装する方法
  • WeChat アプレットの単一選択ラジオボタンと複数選択チェックボックスボタンの使用例
  • WeChatアプレットは、単一選択タブ間の切り替え効果を実現します
  • ミニプログラムは単一選択と複数選択の機能を実装します
  • WeChatアプレットが単一選択機能を実装
  • WeChatアプレットはラジオを使用して単一のオプション機能を表示します[ソースコードのダウンロードあり]
  • WeChat アプレットのラジオチェックボックスコンポーネントの詳細な説明とサンプルコード

<<:  MySQL データベースにおける中国語文字化け問題の詳細な説明

>>:  仮想マシンUbuntu 16.04がインターネットに接続できない問題の解決策

推薦する

aタグ内のテキストを非表示にして画像を表示するには?360モードレンダリングに対応

多くの場合、画像を表示する<a>タグのスタイルに遭遇しますが、タグ内にテキストがあり、そ...

Dockerでmysqlのルートパスワードを変更する方法

最初のステップはmysqlコンテナを作成することです docker exec -it コンテナID ...

JavaScript配列の一般的なメソッドの概要

目次1. はじめに2. フィルター() 3. マップ() 4. ソート() 5. 減らす() 6. ...

iframe を使用して Web ページに天気の影響を表示します

CS: ...コードをコピーコードは次のとおりです。 *{マージン:0;パディング:0;リストスタイ...

Docker ベースの Redis クラスターの構築方法

Redisイメージをダウンロードする docker pull yyyyttttwww/redis を...

ウェブサイトデザインの基礎知識:初心者の方はぜひお読みください

今では多くの人がウェブサイト作成に参加していますが、ウェブサイトはどのように作成すればよいのでしょう...

Linux システムで Tomcat を自動的に起動するための設定方法の紹介

1. /etc/init.d ディレクトリに入ります: cd /etc/init.d 2. tomc...

3つの簡単な例を使ってハイパーリンクの下線を削除する方法

ハイパーリンクの下線を削除するには、スタイルシート CSS を使用する必要があります。当面は CSS...

Docker.v19 で Docker Compose オーケストレーション ツールをインストールして構成する方法

1. Compose の紹介Compose は、マルチコンテナ Docker アプリケーションを定義...

JavaScript関数の使い方の詳細な説明

目次1. 関数を宣言する2. 関数の呼び出し3. 関数パラメータ4. 関数の戻り値5. 議論の使用6...

Windows Server 2016 AD サーバーをセットアップする手順 (画像とテキスト)

導入: AD は Active Directory の略称で、中国語では Active Direct...

Nginx リバース プロキシと負荷分散を実装する方法 (Linux ベース)

ここで nginx のリバース プロキシを試してみましょう。リバースプロキシ方式とは、インターネット...

廃止された Docker は Podman に置き換えられますか?

Kubernetes チームは最近、最新バージョンの Docker でサポートされている機能を廃止...

div画像マーキーシームレス接続実装コード

コードをコピーコードは次のとおりです。 <html> <ヘッド> <ス...

ユーザーのニーズがマーケティング指向のデザインにつながる

<br />それぞれのトピックについて、チーム内でメールで議論します。議論が白熱するにつ...