uniapp的底部滚动选择器picker

官方：picker | 微信开放文档​​​​​​

案例：性别的选择器

在template中：

<view class="li">
				<view class="name"><text class="red">*</text>性别</view>
				<picker v-if="sexList.length > 0" class="input" mode="selector"
					@change="bindPickerChange($event, sexList, 'sex', 'sexIndex')" :value="sexIndex" :range="sexList"
					range-key='name'>
					<view class="uni-input">{{decodeURI(sexList[sexIndex].name)}}</view>
				</picker>
			</view>

在data中：

return {
				
				sexList: [],
				sexIndex: 0,}

初始化并获取码表：当然，没有码表你就想象一个对象值。反正给range里面的。用来显示性别男，性别女的选项框。官方文档可以看range这个参数，就知道了。

sexList为给事件传了个固定值，自行设置

initDict() {
				
				this.getAAA('MABIAOZHI', 'sexList')}

调用接口获取码表值：

这边的this【list】是指，getAAA内传的值是什么。举个栗子：getAAA(zhege,nage)，那么this【nage】==nage

getAAA(type, list) {
				this.###(这边###为接口).(这边是接口方法)([type]).then(res => {
					console.log(res)
                    //这边data为未选择时默认显示的值
					const data = [{
						code: '',
						name: '请选择'
					}]
                    //把码表值的数组添加到this[list]数组内
					this[list] = data.concat(res.data[type])
				})
			},

触发选择的事件：

bindPickerChange(e, list, files, indexFiles, ids) {
				console.log('---', e, list, files, indexFiles)
				const index = e.detail.value
				if (ids) {
					this.createInfo[files] = list[index].id || ''
				} else {
					this.createInfo[files] = list[index].code
				}
				this[indexFiles] = index
			},

案例日期选择器：

<view class="li">
				<view class="name"><text class="red">*</text>生日</view>
				<picker mode="date" class="input" :value="createInfo.birthday" fields="day" :start="startDate"
					:end="endDate" @change="bindDateChange($event, 'birthday')">
					<text class="uni-input">{{createInfo.birthday || '请选择'}}</text>
				</picker>
			</view>

createInfo对象内有值birthday：

// 时间的绑定
			bindDateChange(e, files) {
				this.createInfo[files] = e.detail.value
			},

关于：end和：start

computed: {
			startDate() {
				const data = this.getDate('start')
				return data
			},
			endDate() {
				const data = this.getDate('end')
				return data
			}
		},

返回计算过的值：

getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 80;
					month = '01'
				} else if (type === 'end') {
					year = year;
					month = month > 9 ? month : '0' + month;
				}
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}`;
			},