[uniapp]ピッカーセレクターの使用法

背景:インターフェース「病院の選択」をクリックすると、ピッカーがポップアップ表示され、スクロールして病院を選択できます。
ピッカーを使用するには時間がかかりすぎます。これは非常に単純なアプリケーションですが、昨日この要件を実行したときにいくつかの落とし穴を踏んでしまいました。 . ピッカーとピッカービューの区別がつかなくて作業効率悪くて不満～なのでちょっとだけ記録しておきます～

特記事項:
特に注意すべき点は、ピッカーは下からポップアップするスクロールセレクターであり、独自のデフォルトスタイルを持っていることです。ピッカーをクリックすると、ピッカーの開き方を制御するボタンをクリックする代わりに、ピッカーがポップアップ表示されます。ピッカー!!! これは昨日踏んだ誤解です!!!
ここに画像の説明を挿入

<picker class="picker" @change="changePickerUnit($event,unitList)" :value="indexUnit" :range="unitList" :range-key="'hospital'">
	<view class="picker">
		// {
   
   {unitList[indexUnit].hospital}}
		{
   
   {unitName}}
	</view>
</picker>

	  indexUnit:0, // 选中的下标
	  unitName:'请选择医院',  // 默认选项
	  unitList:[
	  {
    
    
	  	  id:1,
	  	  hospital:'南方医院1'
	  },{
    
    
		  id:1,
		  hospital:'南方医院2'
	  },{
    
    
		  id:1,
		  hospital:'南方医院3'
	  }]
	  
	// 
	changePickerUnit(e,unitList) {
    
    
		console.log(e)
		let index = e.detail.value;
		this.indexUnit = index
		this.unitName = unitList[index].hospital  // 这里给展示的text赋值
	},

その他の問題:

初期化では、
解決するデフォルトのオプションを表示します。デフォルトの項目は、unitList の最初のオプションではなく、「病院を選択してください」に設定する必要がありますが、indexUnit 添字をデフォルトで null にすることはできません。そうしないと、ページ全体が表示されません。ここで賢明な変換が必要です。デフォルト値のunitNameを保持するには変数が必要です。また、@changeが呼び出されたときに、値をunitNameに割り当てます。
@change イベント
change イベントの $event は選択された値を返しませんが、添字を返します。これには、添字から項目を見つける必要があります。インデックスではエラーが発生しやすいため、実際の操作はこのようになるべきではありません。アイテムデータを取得しました。理由がわかる方はメッセージを残してください~~
デフォルトのスタイル変更を
上の図に示します。デフォルトの「確認」ボタンの色は青で、プロジェクトのテーマカラーはオレンジなので、ボタンの色を変更する必要がありますが、ドキュメントには関連する属性が提供されていません。 CSSで修正してください Color~ ディープセレクターを追加しても機能しませんが、追加しても機能しません! 重要~ 頭が大きい~ 対処方法を知っている人は教えてください~

要約すると、スタイルをカスタマイズする必要がある場合は、picker~ の代わりに picker-view または他の ui コンポーネントを使用することをお勧めします。

.uni-picker-container .uni-picker-action.uni-picker-action-confirm{
    
    
	color: #000 !important;
}

[uniapp]ピッカーセレクターの使用法

おすすめ