picker选择器的使用

首先，我们来了解一下平时用到的选择器都有哪几种，我们一般用到的选择器通过模式区分共分有五种，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，替代是普通选择器。下面我们分别来说一下各选择器的基本使用。

普通选择器

<view class="zuinquire">
	<picker mode="selector" :range="time" range-key="name" @change="timeChange" >
		<view class="zstate">时间</view>
	</picker>
	<image src="../../../static/xialajiantoublack.png" class="xialajiantoublack"></image>
</view>

export default {
	data() {
		return {
		informData:[],
			time:['倒序','正序']
		}
	},
	methods: {
		timeChange(e){
			if(e.detail.value==0){
				this.getMonitor('desc')
			}else if(e.detail.value==1){
				this.getMonitor('asc')
			}
			this.getMonitor()
		},
		getMonitor(e){
			if(!e){
				e='desc'
			}
			this.$get('v1/actives/list',{time:e})
			.then(res=>{
				this.informData=res.data
				console.log(res)
			})
		}
	}
}

多列选择器

<view>
	<picker :range="years" @change="yearChange" mode="mSelector">
    	{{  years[0][yearsOne] }} --- {{ years[1][yearsTwo]  }}
	</picker>
</view>

  export default {
        data()  {
            return {
                years:[
                    ["请选择年份", 2019, 2020, 2021],
                    ["请选择日期", 2, 3, 4]
                ],
                yearsOne: 0,
                yearsTwo: 0
            }
        },
        methods:{ 
            yearChange:function(e){
                console.log(e)
                //获得对象的 detail的 value
                //通过数组的下标改变显示在页面的值
                this.yearsOne= e.detail.value[0];
                this.yearsTwo= e.detail.value[1];
            }
        }
    }

时间选择器

 <picker mode="time" :range="years" @change="timeChange">
     <view>{{ timetext }} </view>
 </picker>

export default{
        data(){
            return{
                timetext: '请选择时间'
            }
        },
        methods:{
            timeChange : function(e){
                console.log(e)
                this.timetext = e.detail.value;
            } 
        }
    }

日期选择器

<view class="">
	<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
		<view class="">{{date}}</view>
	</picker>
</view>

export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				date: currentDate,
				time: '12:01'
			}
		},
		methods: {
			bindDateChange: function(e) {
				this.date = e.target.value
			},
			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}`;
			}
		}
	}

省市区选择器

<view>
	<picker mode="region" :range="city" @change="cityChange">
		<view>{{ citytext }} </view>
	</picker>
</view>

export default{
    data(){
         return{
             citytext: '请选择地区'
         }
     },
     methods:{
         cityChange : function(e){
             console.log(e)
             this.citytext = e.detail.value;
         } 
     }
 }

其实我们的选择器用法都差不多，只要我们仔细点学习一下 ，就发现不难啦！