picker使用以及注意事项

picker使用

1.介绍:uni.app自带的滚动选择器。一共有五种方式，通过mode来区分,分别是：普通选择器、多列选择器、日期选择器、事件选择器和省市区选择器。（本文只介绍前三种，后期再更新）

2.使用方式：
（1）普通选择器：mode = selector
参数说明：

常用参数	说明
range	必填。内容必须是数组，但数组内可以包含对象
value	必填。该值影响打开选择器时默认选中的值（对应数组下标）
rang-key	选填。当range对应数组的内容时对象是，可以指定选择器中显示出来的字段，如果在当前情况下不选择的话，选择器中的内容即为:[object object]
@change	触发事件，默认的第一个参数是e，其中e,target.value是选中的内容在数组中对应的下标
disabled	是否禁用,接受的值为布尔值

<!-- range中为数组的情况 -->
<picker @change="pick($event)" mode='selector' :value="index" :range="list" class='listPicker'>
	<view>{{list[index]}}</view>
</picker>

// range为数组的情况
export default {
		data() {
			return {
				list:['娜可露露','小乔','妲己','盾山','蔡文姬']，
				index:0,
			}
		},
		methods:{
			pick(e){
				this.index = e.target.value;
			}
		}
}

	.picker {
		width: 100%;
		box-sizing: border-box;
		padding: 50rpx;
		text-align: center;
		margin-top: 50rpx;
	}

<!-- range为对象数组的情况 -->
<picker @change="picker($event)" mode='selector' :value="arrayIndex" :range="arrayList" range-key="value">
		<view class="picker">{{arrayItem.value?arrayItem.value:'对象选择器'}}</view>
		<!-- 或者 -->
		<!-- <view class="picker">{{arrayList[arrayIndex].value}}</view> -->
</picker>

// range为对象数组的情况
export default {
		data() {
			return {
				arrayIndex: 0,
				arrayList: [{
						key: 0,
						value: '娜可露露'
					},{
						key: 1,
						value: '小乔'
					}, {
						key: 2,
						value: '妲己'
					}, {
						key: 3,
						value: '盾山'
					}, {
						key: 4,
						value: '蔡文姬'
					}
				],
				arrayItem:{},
			}
		},
		methods: {
			picker(e){
				this.arrayItem = this.arrayList[e.target.value];
				// 或者
				// this.arrayIndex = e.target.value;
			}
		}
	}

	.picker {
		width: 100%;
		box-sizing: border-box;
		padding: 50rpx;
		text-align: center;
		margin-top: 50rpx;
	}

（2）多列选择器 mode
参数说明：

常用参数	说明
range	必填。内容必须是多维数组，但数组内可以包含对象
value	必填。该值影响打开选择器时默认选中的值（对应数组下标）
rang-key	选填。当range对应数组的内容时对象是，可以指定选择器中显示出来的字段，如果在当前情况下不选择的话，选择器中的内容即为:[object object]
@change	触发事件，默认的第一个参数是e，其中e,target.value是一个数组，是选中的内容在数组中对应的下标
@columnchange	触发事件，默认的第一个参数是e，其中e.detail.column 移动或触发的列数，具体看代码
disabled	是否禁用,接受的值为布尔值

<picker @change="pickerMul($event)" @columnchange="pickerMul1($event)" mode='multiSelector' :value="posIndex" :range="posList" range-key="text">
		<view class="picker">
			{{pos1.text?pos1.text:'请选择英雄'}}{{pos2.text?pos2.text:''}}{{pos3.text?pos3.text:''}}
		</view>
</picker>

data(){
	return {
		posList: [[{text: '王者荣耀'}],[{key: 1,text: '坦克'}, {key: 2,text: '射手'}, {key: 3,text: '辅助'}],[{text: '程咬金'}, {text: '亚瑟'}, {text: '白起'
}, {text: '猪八戒'}]],
		pos1: {},
		pos2: {},
		pos3: {}
	}
},
pickerMul(e) {
	let v = e.target.value;
	let index1 = v[0];
	let index2 = v[1];
	let index3 = v[2];
	this.pos1 = this.posList[0][index1];
	this.pos2 = this.posList[1][index2];
	this.pos3 = this.posList[2][index3];
},
pickerMul1(e) {
	let array = [[{text: '程咬金'}, {text: '亚瑟'}, {text: '白起'}, {text: '猪八戒'}],[{text: '后羿'}, {text: '百里守约'}, {text: '鲁班七号'}, {text: '马可波罗'}],[{text: '蔡文姬'}, {text: '盾山'}, {text: '瑶'}, {text: '阿古朵'}]];
	if (e.detail.column == 1) {
		this.$set(this.posList, 2, array[e.target.value]);
	} else {
		return;
	}
}

.picker {
		width: 100%;
		box-sizing: border-box;
		padding: 50rpx;
		text-align: center;
		margin-top: 50rpx;
	}

(3)时间选择器 mode=“date”

常用参数	说明
start	必填。开始时间
end	必填。结束时间
@change	触发事件，默认的第一个参数是e，其中e,target.value是一个数组，是选中的内容在数组中对应的下标
disabled	是否禁用,接受的值为布尔值

<picker mode="date" :value="time" :start="startDate" :end="endDate" @change="bindDateChange($event)">
	<view class="picker">
		<view v-if="time">{{time}}</view>
		<view style="color:#999;" v-if="!time">必填项</view>
	</view>
</picker>

data(){
	return{
		startDate:'',
		endDate:'',
		time:''
	}
},
bindDateChange(e) {
	this.time = e.target.value	
},

.picker {
		width: 100%;
		box-sizing: border-box;
		padding: 50rpx;
		text-align: center;
		margin-top: 50rpx;
	}

3.注意事项：
(1) 初始化的picker上必须有字(或者必须有宽度)，否则，很难点开，因为点不到
(2)支付宝端的picker子元素只允许有一个且必须是view
(3)在picker上可以添加样式，但是必须加/deep/ (支付宝无效)，所以，建议样式全部加在picker中的view上面
(4)多列选择器在支付宝端不生效，需分成普通选择器