快捷導航

uniapp?u-picker多列用法以及設(shè)置默認選中值

更新時間：2023年06月08日 10:39:35 作者：奈何-1912*

uview組件庫u-picker組件可能很多人不熟悉,下面這篇文章主要給大家介紹了關(guān)于uniapp?u-picker多列用法以及設(shè)置默認選中值的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

一、簡介

<u-picker title="選擇圖書館/崗位" keyName="name" @cancel="cancelChange" :loading="loading" ref="uPicker" @change="changeHandler" @confirm="libConfirm" :show="showChange" :columns="[changeLibList, changeDpartList]"></u-picker>

keyName="name" ，意思是把 name 作為 piker 選項顯示的關(guān)鍵字
columns作為一個數(shù)組，其內(nèi)部有幾個成員，則代表有當前piker有幾列
cancel、change、confirm 分別為取消、改變選值和確定執(zhí)行的幾個方法
title為piker的頂部標題；loading為true時，會打開加載動畫

二、使用

本文的 columns = [changeLibList, changeDpartList] 里面有changeLibList 和changeDpartList 兩個數(shù)組成員，changeLibList 為第一列數(shù)據(jù)，changeDpartList 為第二列數(shù)據(jù)。changeLibList 和 changeDpartList 數(shù)據(jù)結(jié)構(gòu)大概如下所示：

this.changeLibList = [{"id":1,"name":"賽爾威"},{"id":2,"name":"龍崗圖書館"}]
this.changeDpartList= [{"id":1,"name":"行政"},{"id":2,"name":"人事"}]

每次打開頁面時，在onShow勾子中重新請求接口數(shù)據(jù) （防止數(shù)據(jù)在別的系統(tǒng)有所變化，如果你的數(shù)據(jù)是固定不變的，則只獲取一次即可）

this.$refs.uPicker.setIndexs(0, 0) 設(shè)置第一列的默認選中值為第一個（微信小程序無法將picker實例傳出來，只能通過ref操作），但此方法只適用于小程序，app用此方法后可能會造成列表不能滑動等bug

async onShow () {
			// 每次都重新拿新數(shù)據(jù)
			this.changeLibList = await UserApi.libraryListOfuser(this.user.id)
			this.changeDpartList = await UserApi.getLibraryJobList(this.changeLibList[0].id)
			// 防止每次默認選中值不一致，設(shè)置其每一列的默認選中值都為第一個
			this.$refs.uPicker.setIndexs(0, 0)
		},

在每次切換時，調(diào)用 changeHandler方法請求接口拿到對應(yīng)的第二列數(shù)據(jù)，賦值給changeDpartList，如下：

async changeHandler(e){
			       	const {
					value,
					columnIndex,
				} = e
				if (columnIndex === 0) {
					// 打開加載狀態(tài)
					this.loading = true
					// 模擬網(wǎng)絡(luò)請求
					this.changeDpartList = await UserApi.getLibraryJobList(value[0].id)
					// 關(guān)閉加載狀態(tài)
					this.loading = false
				}
			},

附：uview組件庫 u-picker組件選項滑動選中延時、單列選擇器默認選中

1、u-picker組件選項滑動選中延時的問題只需添加一個屬性 :immediateChange='true'

2、單列選擇器默認選中某一項只需添加一個屬性，把指定下標給它 :defaultIndex="[1]"

<u-picker
@haddlePicker="haddlePicker"
:showToolbar="true"
@cancel="showDate = false"
:show="showDate"
title="請選擇航班日期"
:columns="timeList"
keyName="name"
:defaultIndex="[1]"
:immediateChange='true'
></u-picker>