
简体中文
从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器。
Web | 微信小程序 | Android | iOS | HarmonyOS |
---|---|---|---|---|
4.0 | 4.41 | x | x | 4.61 |
picker组件其实是基于picker-view组件封装了一个弹出形态。
Android/iOS平台可改用picker-view组件、或uni.showActionSheet。
或者使用开源组件uni-data-picker。这是也是基于picker-view组件封装的云端一体组件,如果需要选择城市,那么推荐使用该组件。
名称 | 类型 | 默认值 | 兼容性 | 描述 | ||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
disabled | boolean | - | 是否禁用 | |||||||||||||||||||
mode | string | - | 选择器类型 | |||||||||||||||||||
| ||||||||||||||||||||||
range | array | - | mode为 selector 或 multiSelector 时,range 有效 | |||||||||||||||||||
range-key | string | - | 当 range 是一个 Object Array 时,通过 range-key 来指定 Object 中 key 的值作为选择器显示内容 | |||||||||||||||||||
value | string | - | mode为select或multiSelector时:value 的值表示选择了 range 中的第几个(下标从 0 开始);mode为time时:表示选中的时间,格式为"hh:mm";mode为date时:表示选中的日期,格式为"YYYY-MM-DD";mode为region时: 表示选中的省市区,默认选中每一列的第一个值。 | |||||||||||||||||||
start | string | - | mode为time:表示有效时间范围的开始,字符串格式为"hh:mm";mode为date:表示有效日期范围的开始,字符串格式为"YYYY-MM-DD" | |||||||||||||||||||
end | string | - | mode为time:表示有效时间范围的结束,字符串格式为"hh:mm";mode为date:表示有效日期范围的结束,字符串格式为"YYYY-MM-DD" | |||||||||||||||||||
fields | string | - | 有效值 year,month,day,表示选择器的粒度 | |||||||||||||||||||
| ||||||||||||||||||||||
custom-item | string | - | 可为每一列的顶部添加一个自定义的项 | |||||||||||||||||||
@change | (event: UniPickerChangeEvent) => void | - | value 改变时触发 change 事件,event.detail = {value: value} | |||||||||||||||||||
@columnchange | (event: UniPickerColumnChangeEvent) => void | - | 某一列的值改变时触发 columnchange 事件,event.detail = {column: column, value: value},column 的值表示改变了第几列(下标从0开始),value 的值表示变更值的下标 | |||||||||||||||||||
@cancel | (event: UniPickerCancelEvent) => void | - | 取消选择时触发 | |||||||||||||||||||
header-text | string | - | 选择器的标题,仅微信小程序安卓端可用 | |||||||||||||||||||
level | string | - | mode="region" 时有效,选择器层级 | |||||||||||||||||||
|
名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |
---|---|---|---|---|---|
value | any | 是 | - | - | - |
名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 |
---|---|---|---|---|---|
value | number | 是 | - | - | - |
column | number | 是 | - | - | - |
示例为hello uni-app x alpha分支,与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例另见
示例
<template>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<page-head :title="title"></page-head>
<text class="uni-title uni-common-pl">禁用选择器</text>
<view class="uni-list">
<view class="uni-list-cell">
<view class="uni-list-cell-left">当前选择</view>
<view class="uni-list-cell-db">
<picker class="picker-disabled--test" @change="bindPickerChange" disabled :value="index" :range="selectorArray" range-key="name">
<view class="uni-input picker-disabled--value">{{selectorArray[index].name}}</view>
</picker>
</view>
</view>
</view>
<text class="uni-picker-tips">注:值与普通选择器同步,但不可选择</text>
<text class="uni-title uni-common-pl">普通选择器</text>
<view class="uni-list">
<view class="uni-list-cell">
<view class="uni-list-cell-left">当前选择</view>
<view class="uni-list-cell-db">
<picker class="picker-selector--test" @change="bindPickerChange" :value="index" :range="selectorArray" range-key="name">
<view class="uni-input picker-selector--value">{{selectorArray[index].name}}</view>
</picker>
</view>
</view>
</view>
<text class="uni-title uni-common-pl">多列选择器</text>
<view class="uni-list">
<view class="uni-list-cell">
<text class="uni-list-cell-left">当前选择</text>
<view class="uni-list-cell-db">
<picker class="picker-multi--test" mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray">
<view class="uni-input picker-multi--value">
{{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}},{{multiArray[2][multiIndex[2]]}}
</view>
</picker>
</view>
</view>
</view>
<text class="uni-title uni-common-pl">时间选择器</text>
<view class="uni-list">
<view class="uni-list-cell">
<view class="uni-list-cell-left">当前选择</view>
<view class="uni-list-cell-db">
<picker class="picker-time--test" mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">
<view class="uni-input">{{time}}</view>
</picker>
</view>
</view>
</view>
<text class="uni-picker-tips">注:选择 09:01 ~ 21:01 之间的时间, 不在区间内不能选中</text>
<text class="uni-title uni-common-pl">日期选择器 fields = day</text>
<view class="uni-list">
<view class="uni-list-cell">
<text class="uni-list-cell-left">当前选择 </text>
<view class="uni-list-cell-db">
<picker class="picker-date-day--test" mode="date" :value="dayDate" :start="startDate" :end="endDate" @change="bindDayDateChange">
<view class="uni-input">{{dayDate}}</view>
</picker>
</view>
</view>
</view>
<text class="uni-picker-tips">注:选择当前时间 ±10 年之间的时间, 不在区间内不能选中</text>
<text class="uni-title uni-common-pl">日期选择器 fields = month</text>
<view class="uni-list">
<view class="uni-list-cell">
<text class="uni-list-cell-left">当前选择 </text>
<view class="uni-list-cell-db">
<picker class="picker-date-month--test" mode="date" fields="month" :value="monthDate" :start="startDate" :end="endDate" @change="bindMonthDateChange">
<view class="uni-input">{{monthDate}}</view>
</picker>
</view>
</view>
</view>
<text class="uni-picker-tips">注:选择当前时间 ±10 年之间的时间, 不在区间内不能选中,且日不可选</text>
<text class="uni-title uni-common-pl">日期选择器 fields = year</text>
<view class="uni-list">
<view class="uni-list-cell">
<text class="uni-list-cell-left">当前选择 </text>
<view class="uni-list-cell-db">
<picker class="picker-date-year--test" mode="date" fields="year" :value="yearDate" :start="startDate" :end="endDate" @change="bindYearDateChange">
<view class="uni-input">{{yearDate}}</view>
</picker>
</view>
</view>
</view>
<text class="uni-picker-tips">注:选择当前时间 ±10 年之间的时间, 不在区间内不能选中,且只能选择年</text>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script lang="uts">
import { state, setEventCallbackNum } from '@/store/index.uts'
type DataType = {
name : string
}
function getDate(date_text : string = 'day', type ?: string) : string {
const date = new Date();
let year : string | number = date.getFullYear();
let month : string | number = date.getMonth() + 1;
let day : string | number = date.getDate();
if (type == 'start') {
year = year - 10;
} else if (type == 'end') {
year = year + 10;
}
month = month > 9 ? month : '0' + month;;
day = day > 9 ? day : '0' + day;
if (date_text == 'month') {
return `${year}-${month}`;
} else if (date_text == 'year') {
return `${year}`;
}
return `${year}-${month}-${day}`;
}
export default {
data() {
return {
title: 'picker',
selectorArray: [{ name: '中国' }, { name: '美国' }, { name: '巴西' }, { name: '日本' }] as DataType[],
index: 0,
multiArray: [
['亚洲', '欧洲'],
['中国', '日本'],
['北京', '上海', '广州']
] as Array<string[]>,
multiIndex: [0, 0, 0] as number[],
dayDate: getDate('day'),
monthDate: getDate('month'),
yearDate: getDate('year'),
startDate: getDate('day', 'start'),
endDate: getDate('day', 'end'),
time: '12:01'
}
},
methods: {
bindPickerChange: function (e : UniPickerChangeEvent) {
console.log('picker发送选择改变,携带值为:' + e.detail.value)
this.index = e.detail.value
},
bindMultiPickerColumnChange: function (e : UniPickerColumnChangeEvent) {
console.log('修改的列为:' + e.detail.column + ',值为:' + e.detail.value)
this.multiIndex[e.detail.column] = e.detail.value
switch (e.detail.column) {
case 0: //拖动第1列
switch (this.multiIndex[0]) {
case 0:
this.multiArray[1] = ['中国', '日本']
this.multiArray[2] = ['北京', '上海', '广州']
break
case 1:
this.multiArray[1] = ['英国', '法国']
this.multiArray[2] = ['伦敦', '曼彻斯特']
break
}
this.multiIndex.splice(1, 1, 0)
this.multiIndex.splice(2, 1, 0)
break
case 1: //拖动第2列
switch (this.multiIndex[0]) { //判断第一列是什么
case 0:
switch (this.multiIndex[1]) {
case 0:
this.multiArray[2] = ['北京', '上海', '广州']
break
case 1:
this.multiArray[2] = ['东京', '北海道']
break
}
break
case 1:
switch (this.multiIndex[1]) {
case 0:
this.multiArray[2] = ['伦敦', '曼彻斯特']
break
case 1:
this.multiArray[2] = ['巴黎', '马赛']
break
}
break
}
this.multiIndex.splice(2, 1, 0)
break
}
this.$forceUpdate()
},
bindDayDateChange: function (e : UniPickerChangeEvent) {
this.dayDate = e.detail.value as string
},
bindMonthDateChange: function (e : UniPickerChangeEvent) {
this.monthDate = e.detail.value as string
},
bindYearDateChange: function (e : UniPickerChangeEvent) {
this.yearDate = e.detail.value as string
},
bindTimeChange: function (e : UniPickerChangeEvent) {
this.time = e.detail.value as string
},
// 自动化函数
setSelectorValue(){
this.index = 2
},
getEventCallbackNum() : number {
return state.eventCallbackNum
},
// 自动化测试
setEventCallbackNum(num : number) {
setEventCallbackNum(num)
},
}
}
</script>
<style>
.uni-title {
font-size: 14px;
}
.uni-picker-tips {
font-size: 12px;
color: #666;
margin-top: 5px;
margin-bottom: 15px;
padding: 0 15px;
}
</style>