> 選擇器（相當于web的下拉框）在表單功能模塊中是十分常用的組建，以下代碼來自hello uniapp供大家參考 > 官方文檔：https://uniapp.dcloud.io/component/picker [TOC] ## 普通選擇器 ~~~ <template> <view class="page"> <view class="uni-title">普通選擇器</view> <picker @change="bindPickerChange" :value="index" :range="array" range-key="name"> <view class="uni-input">{{array[index].name}}</view> </picker> </view> </template> <script> export default { data() { return { array: [{name:'中國'},{name: '美國'}, {name:'巴西'}, {name:'日本'}], index: 0 } }, methods: { bindPickerChange: function(e) { console.log('picker發送選擇改變，攜帶值為：' + e.detail.value) this.index = e.detail.value } } } </script> ~~~ ## 時間選擇器 ~~~ <template> <view class="page"> <view class="uni-title">時間選擇器</view> <picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange"> <view class="uni-input">{{time}}</view> </picker> </view> </template> <script> export default { data() { return { time: '12:01' } }, methods: { bindTimeChange: function(e) { console.log('picker發送選擇改變，攜帶值為：' + e.detail.value) this.time = e.detail.value } } } </script> ~~~ ## 日期選擇器 ~~~ <template> <view class="page"> <view class="uni-title">日期選擇器</view> <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange" style="margin-bottom: 50rpx;"> <view class="uni-input">{{date}}</view> </picker> </view> </template> <script> export default { data() { return { date: getDate('now'), startDate:getDate('start'), endDate:getDate('end') } }, methods: { bindDateChange: function(e) { console.log('picker發送選擇改變，攜帶值為：' + e.detail.value) this.date = e.detail.value } } } function getDate(type) { const date = new Date(); let year = date.getFullYear(); let month = date.getMonth() + 1; let day = date.getDate(); if (type === 'start') { year = year - 60; } else if (type === 'end') { year = year + 2; } month = month > 9 ? month : '0' + month;; day = day > 9 ? day : '0' + day; return `${year}-${month}-${day}`; } </script> ~~~ ## 多列選擇器（省市區三級聯動例子） ~~~ <template> <view class="page"> <view class="uni-title">多列選擇器</view> <picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray" style="margin-bottom: 50rpx;"> <view class="uni-input">{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}</view> </picker> </view> </template> <script> export default { data() { return { // multiArray 為初始化數據，不管以后用戶是否已有數據，再進行初始化，都以該初始化數據為準，這樣邏輯實現才會更清晰 // 默認讓服務端提供 第1列的數據，然后根據第1列數據的第1條數據，再次請求第2列、第3列的數據列表 multiArray: [ ['亞洲', '歐洲'], ['中國', '日本'], ['北京', '上海', '廣州'] ], multiIndex: [0, 0, 0] } }, methods: { bindMultiPickerColumnChange: function(e) { console.log('修改的列為：' + e.detail.column + '，值為：' + e.detail.value) this.multiIndex[e.detail.column] = e.detail.value; let firstIndex = this.multiIndex[0]; if (e.detail.column == 0) { //拖動第1列 if (firstIndex == 0) { // 第1列如果是“亞洲”，后續的數據初始化 // 選中第1列的第1條數據，則需將第2列以及第3列數據進行初始化，一般都是通過請求服務端數據，這里寫靜態數據僅供參考 this.multiArray[1] = ['中國', '日本'] this.multiArray[2] = ['北京', '上海', '廣州'] }else if (firstIndex == 1) { // 第1列如果是“歐洲”，后續的數據初始化 // 選中第1列的第2條數據，則需將第2列以及第3列數據進行初始化，一般都是通過請求服務端數據，這里寫靜態數據僅供參考 this.multiArray[1] = ['英國', '法國'] this.multiArray[2] = ['倫敦', '曼徹斯特'] } this.multiIndex.splice(1, 1, 0); //將multiIndex數據中的第2列初始化 this.multiIndex.splice(2, 1, 0); //將multiIndex數據中第3列初始化 }else if (e.detail.column == 1){ //拖動第2列 let secondIndex = this.multiIndex[1] if (firstIndex == 0) { // 第1列如果是“亞洲”，后續的數據初始化 if (secondIndex == 0) { // 第2列是“中國”，后續的數據初始化 this.multiArray[2] = ['北京', '上海', '廣州'] }else if (secondIndex == 1) { // 第2列是“日本”，后續的數據初始化 this.multiArray[2] = ['東京','北海道'] } }else if (firstIndex == 1) { if (secondIndex == 0) { this.multiArray[2] = ['倫敦', '曼徹斯特'] }else if (secondIndex == 1) { this.multiArray[2] = ['巴黎', '馬賽'] } } this.multiIndex.splice(2, 1, 0) } // 有時候你會碰到數據已經更新了但是組件還是沒有刷新，這個時候需要調用$forceUpdate()強制刷新 this.$forceUpdate(); } } } </script> ~~~