web前端全系列 教程
1839个小节阅读:2243.6k
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
从底部弹起的滚动选择器。支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
range | Array / Array | [] | mode为 selector 时,range 有效 |
value | Number | 0 | value 的值表示选择了 range 中的第几个(下标从 0 开始) |
disabled | Boolean | false | 是否禁用 |
@change | EventHandle | value 改变时触发 change 事件,event.detail = {value: value} |
xxxxxxxxxx
<view>地区选择器</view>
<view>
<view>
当前选择
</view>
<view>
<picker @change="bindPickerChange" :value="index" :range="array">
<view>{{array[index]}}</view>
</picker>
</view>
</view>
xxxxxxxxxx
export default {
data() {
return {
array: ['中国', '美国', '巴西', '日本'],
index: 0
}
},
methods: {
bindPickerChange(e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.index = e.detail.value
}
}
}
xxxxxxxxxx
<view>时间选择器</view>
<view>
<view>
<view>
当前选择
</view>
<view>
<picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">
<view>{{time}}</view>
</picker>
</view>
</view>
</view>
xxxxxxxxxx
export default {
data() {
return {
time: '12:01'
}
},
methods: {
bindTimeChange(e){
this.time = e.detail.value
}
}
}
xxxxxxxxxx
<view>日期选择器</view>
<view>
<view>
当前选择
</view>
<view>
<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
<view>{{date}}</view>
</picker>
</view>
</view>
xexport default {
data() {
const currentDate = this.getDate({
format: true
})
return {
date: currentDate
}
},
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}`;
},
bindDateChange: function(e) {
this.date = e.detail.value
}
}
}
实时效果反馈
1. uni-app中,设置日期选择器mode
的值应该为下列哪一个:
A null
B selector
C time
D date
答案
1=>C