picker使用以及注意事项

picker使用

1.介绍:uni.app自带的滚动选择器。一共有五种方式,通过mode来区分,分别是:普通选择器、多列选择器、日期选择器、事件选择器和省市区选择器。(本文只介绍前三种,后期再更新)
picker使用以及注意事项
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;
	}

picker使用以及注意事项

<!-- 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;
	}

picker使用以及注意事项
(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;
	}

picker使用以及注意事项
(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;
	}

picker使用以及注意事项
3.注意事项:
(1) 初始化的picker上必须有字(或者必须有宽度),否则,很难点开,因为点不到
(2)支付宝端的picker子元素只允许有一个且必须是view
(3)在picker上可以添加样式,但是必须加/deep/ (支付宝无效),所以,建议样式全部加在picker中的view上面

上一篇:Element UI——日期时间选择器el-date-picker开始时间与结束时间约束解决方案


下一篇:Vuetify2.x学习笔记(肆):扩展面板(expansion panel)、菜单(menu)、对话框(dialog/popup)、表单(form)、日期选择器(date picker)【完结】