官方文档:picker | uni-app官网 (dcloud.net.cn)
组件:<picker></picker>
从底部弹起的滚动选择器。支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器。
单列选择器
- mode:selector(单列选择器)
- range:数组或数组对象,存放要展示的数据,只有 mode 为 selector 或 multiSelector 时有效
- range-key:指定数组对象中的 key 为选择器展示内容
- value:表示选择了 range 中的第几个,从 0 开始
- change:点击确定时触发的事件
<picker @change="bindPickChange"
mode="selector"
:range="array"
range-key="name"
:value="index">
<view>{{array[index].name}}</view>
</picker>
<script>
export default {
data() {
return {
array: [
{name: "北京"},
{name: "天津"},
{name: "上海"}
],
index: 0
}
},
methods: {
bindPickChange(e) {
// 改变当前选择的值
this.index = e.detail.value;
},
}
}
</script>
多列选择器
- mode:multiSelector(多列选择器),
- range:二维数组,
- value:一个数组,表示选择了 range 中的第几列,第几个,从 0 开始
- change:点击确定时触发的事件
<picker @change="bindPickChange"
@columnchange="bindMultiPickerColumnChange"
mode="multiSelector"
:range="multArray"
:value="multIndex">
<view>
{{multArray[0][multIndex[0]]}}
{{multArray[1][multIndex[1]]}}
{{multArray[2][multIndex[2]]}}
</view>
</picker>
时间选择器
- mode:time
- end:结束时间
- start:开始时间
- value:默认选中时间
<picker @change="bindPickChange"
mode="time"
end="endTime"
start="startTime"
:value="time">
<view>{{time}}</view>
</picker>
<script>
export default {
data() {
return {
endTime: "23: 59",
startTime: "00: 00",
time: "11: 17"
}
},
methods: {
bindPickChange(e) {
// 改变选中的时间
this.time = e.detail.value
},
}
}
</script>
日期选择器
- mode:date
- end:结束日期
- start:开始日期
- value:默认选中日期
<picker @change="bindPickChange"
mode="date"
:value="date"
:start="startDate"
:end="endDate">
<view>{{date}}</view>
</picker>
<script>
export default {
data() {
return {
date: this.getDate({
format: true
}),
}
},
computed: {
// 获取开始日期
startDate() {
return this.getDate('start');
},
// 获取结束日期
endDate() {
return this.getDate('end');
}
},
methods: {
// 日期转换
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}`;
},
bindPickChange(e) {
// 改变选中的日期
this.date = e.detail.value
},
}
}
</script>