uni-app使用picker的多种选择器(多列,时间,地区)
程序员文章站
2022-03-19 22:01:23
...
picker底部滚动选择器
<template>
<view>
<view>
<picker :range="years" @change="yearChange">
{{ years[yearsIndex] }}
</picker>
</view>
</view>
</template>
<script>
export default {
data() {
return {
years:["请选择年份",1998,1999,2000],
yearsIndex:0
}
},
methods:{
yearChange:function(e){
console.log(e)
//获得对象的 detail的 value
//通过数组的下标改变显示在页面的值
this.yearsIndex = e.detail.value;
}
}
}
</script>
<style>
</style>
效果图
多列选择器
多列选择器基于二维数组, 在标签中添加 mode="multiSelector",
<template>
<view>
<!-- <view>
<picker :range="years" @change="yearChange">
{{ years[yearsIndex] }}
</picker>
</view> -->
<!-- mode="multiSelector" 多列选择器 -->
<view>
<picker :range="years" @change="yearChange" mode="multiSelector">
{{ years[0][yearsIndex1] }} --- {{ years[1][yearsIndex2] }}
</picker>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
years:[
["请选择年份", 1998, 1999, 2000],
["请选择日期", 11, 12, 13]
],
yearsIndex1: 0,
yearsIndex2: 0
}
},
methods:{
yearChange:function(e){
console.log(e)
//获得对象的 detail的 value
//通过数组的下标改变显示在页面的值
this.yearsIndex1 = e.detail.value[0];
this.yearsIndex2 = e.detail.value[1];
}
}
}
</script>
<style>
</style>
效果图
时间选择器
时间选择器 mode=“time”
<template>
<view>
<!-- <view>
<picker :range="years" @change="yearChange">
{{ years[yearsIndex] }}
</picker>
</view> -->
<!-- mode="multiSelector" 多列选择器 -->
<!-- <view>
<picker :range="years" @change="yearChange" mode="multiSelector">
{{ years[0][yearsIndex1] }} --- {{ years[1][yearsIndex2] }}
</picker>
</view> -->
<picker mode="time" :range="years" @change="yearChange">
<view>{{ timetext }} </view>
</picker>
</view>
</template>
<script>
// export default {
// data() {
// return {
// years:[
// ["请选择年份", 1998, 1999, 2000],
// ["请选择日期", 11, 12, 13]
// ],
// yearsIndex1: 0,
// yearsIndex2: 0
// }
// },
// methods:{
// yearChange:function(e){
// console.log(e)
// //获得对象的 detail的 value
// //通过数组的下标改变显示在页面的值
// this.yearsIndex1 = e.detail.value[0];
// this.yearsIndex2 = e.detail.value[1];
// console.log(this.yearsIndex1)
// console.log(this.yearsIndex2)
// }
// }
// }
export default{
data(){
return{
timetext: '请选择时间'
}
},
methods:{
yearChange : function(e){
console.log(e)
this.timetext = e.detail.value;
}
}
}
</script>
<style>
</style>
效果图
地区选择器
地区选择器 mode="region"
<template>
<view>
<!-- <view>
<picker :range="years" @change="yearChange">
{{ years[yearsIndex] }}
</picker>
</view> -->
<!-- mode="multiSelector" 多列选择器 -->
<!-- <view>
<picker :range="years" @change="yearChange" mode="multiSelector">
{{ years[0][yearsIndex1] }} --- {{ years[1][yearsIndex2] }}
</picker>
</view> -->
<!-- mode="time" 时间选择器-->
<!-- <picker mode="time" :range="years" @change="yearChange">
<view>{{ timetext }} </view>
</picker> -->
<!-- mode="region" 地区选择器 -->
<picker mode="region" :range="years" @change="yearChange">
<view>{{ timetext }} </view>
</picker>
</view>
</template>
<script>
// export default {
// data() {
// return {
// years:[
// ["请选择年份", 1998, 1999, 2000],
// ["请选择日期", 11, 12, 13]
// ],
// yearsIndex1: 0,
// yearsIndex2: 0
// }
// },
// methods:{
// yearChange:function(e){
// console.log(e)
// //获得对象的 detail的 value
// //通过数组的下标改变显示在页面的值
// this.yearsIndex1 = e.detail.value[0];
// this.yearsIndex2 = e.detail.value[1];
// console.log(this.yearsIndex1)
// console.log(this.yearsIndex2)
// }
// }
// }
// 时间选择器
// export default{
// data(){
// return{
// timetext: '请选择时间'
// }
// },
// methods:{
// yearChange : function(e){
// console.log(e)
// this.timetext = e.detail.value;
// }
// }
// }
//地区选择器
export default{
data(){
return{
timetext: '请选择地区'
}
},
methods:{
yearChange : function(e){
console.log(e)
this.timetext = e.detail.value;
}
}
}
</script>
<style>
</style>