picker使用以及注意事项
picker使用1.介绍:uni.app自带的滚动选择器。一共有五种方式,通过mode来区分,分别是:普通选择器、多列选择器、日期选择器、事件选择器和省市区选择器。(本文只介绍前三种,后期再更新)2.使用方式:(1)普通选择器:mode = selector参数说明:常用参数说明range必填。内容必须是数组,但数组内可以包含对象value必填。该值影响打开选择器时默认选中的值(对应数组下标)ra
·
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)多列选择器在支付宝端不生效,需分成普通选择器
更多推荐
所有评论(0)