uni-app 时间选择器,任意选择器
因为是原生的,所以挺好理解
1.一个简单的选择器是这么写的
可以用来选择优先级
<template>
<view>
选择器:
<picker @change="Change" :value="index" :range="array">
<view class="uni-input">{{array[index]}} </view>
</picker>
</view>
</template>
<script>
export default {
data() {
return {
array: ['香蕉', '苹果', '水蜜桃', '五十块一斤'],
index: 0
}
},
methods: {
Change: function(e) {
this.index = e.target.value
},
}
}
</script>
<style>
</style>
2.选择两个
可以用来写时间,需要注意的是要给标签写上mode=“multiSelector”,不然不生效
<template>
<view>
进阶选择器
<picker mode="multiSelector" @change="Change" :value="index" :range="array2">
<view class="uni-input">{{array2[0][index[0]]}}...{{array2[1][index[1]]}}</view>
</picker>
</view>
</template>
<script>
export default {
data() {
return {
array: ['1', '2', '3', '4'],
array2: [
['早餐', '午餐', '晚餐'],
['不吃', '外卖', '下楼吃']
],
index: [0, 0]
}
},
methods: {
Change: function(e) {
this.index = e.target.value
console.log(this.index)
},
}
}
</script>
<style>
</style>
3.官方的时间选择器
start就是设置了早上九点,但是选择了早上八点,最早只能选到早上九点
end就是设置了晚上九点,但是你选择了晚上十点,他最迟只能选到九点
添加了获取当前时间的方法
<template>
<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: ''
}
},
onShow() {
this.time = this.yearTime()
},
methods: {
bindTimeChange: function(e) {
this.time = e.detail.value
},
yearTime(e){
var a = new Date();
var y=a.getFullYear();
var m=a.getMonth()+1;
m = m<10? "0"+m:m;
var d=a.getDate();
d = d<10? "0"+d:d;
var h=a.getHours();
h = h<10? "0"+h:h;
var mm=a.getMinutes();
mm = mm<10? "0"+mm:mm;
var s=a.getSeconds();
s = s<10? "0"+s:s;
if(e == 'year'){
return y + '/' + m + '/' + d;
}
if(e == 'time'){
return h + ':' + mm + ':' + s;
}
if(e == 'yearTime'){
return y + '/' + m + '/' + d + ' ' + h + ':' + mm + ':' + s;
}
return h + ':' + mm;
}
}
}
</script>
<style>
</style>
4.如果你是想像选择收货地址的那种,选了市后给你选县的话
那说明你很有想法了,但是实力没跟上
还没写完但是能用的地址选择器