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

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

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

効果:

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

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がインターネットに接続できない問題の解決策

推薦する

CSS3 フレックスレイアウトを使用して要素を均等に分散するサンプルコード

この記事では主に、CSS3 フレックスレイアウトを使用して要素を均等に配置する方法を紹介します。自分...

Linux 上で Docker コンテナを作成、一覧表示、削除する方法の概要

1. Dockerコンテナを起動する以下のコマンドを使用して新しい Docker コンテナを起動しま...

データ構造 - ツリー (III): 多方向検索ツリー B ツリー、B+ ツリー

多方向探索ツリー完全二分木の高さ: O(log2N)、ここで2は対数完全なM方向探索木の高さ: O(...

MySqlは指定されたユーザーのデータベースビュークエリ権限を設定します

1. 新しいユーザーを作成します。 1. SQL ステートメントを実行して新しいものを作成します (...

TortoiseSvn Little Turtle インストール 最新の詳細なグラフィックチュートリアル

tortoiseGit のインストール時にいつも問題があったので、単純に svn に変更しました。途...

HTML メタビューポート属性の詳細な説明

ビューポートとはモバイル ブラウザは、Web ページを仮想の「ウィンドウ」(ビューポート) に配置し...

MySQL レプリケーションの利点と原則を詳しく説明します

レプリケーションとは、マスター データベースの DDL および DML 操作をバイナリ ログを介して...

Centos7でmysql6の初期化インストールパスワードをインストールする方法

1. まずデータベースサーバーを停止しますサービスmysqld停止2.vim /etc/my.cnf...

フォームタグの Enctype 属性とその応用例の紹介

Enctype : ブラウザがデータをサーバーに送り返すときに使用するエンコーディングのタイプを指定...

Linux で MySQL データベースのスケジュールされたバックアップを実装する簡単な方法

詳細な手順は次のとおりです。 1. ディスク容量を確認します。 [root@localhost バッ...

MySQL ストアド プロシージャで case ステートメントを使用する詳細な例

この記事では、例を使用して、MySQL ストアド プロシージャでの case ステートメントの使用方...

Mysqlチュートリアルでのグループランキングの実装例の詳細な説明

目次1. データソース2. データの総合順位1) 総合ランキング2) 同順位3) 同順位3. データ...

MySQLデータベースのトランザクション分離レベルの詳細な説明

データベーストランザクション分離レベルデータベース トランザクションには、低から高まで 4 つの分離...

CentOS に MySQL 5.5 をインストールするための完全な手順

目次1. インストール前の準備、インストールパッケージのダウンロード1 インストールの準備2 インス...

入力できない無効な値はアクションレイヤーに渡すことができません

フォームを入力不可にしたい場合は、フォームを次のように設定します。コードをコピーコードは次のとおりで...