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)多列选择器在支付宝端不生效，需分成普通选择器

picker使用以及注意事项相关推荐

picker封装 uniapp_uniapp自定义picker城市多级联动组件
uniapp自定义picker城市多级联动组件支持多端--h5.app.微信小程序.支付宝小程序... 支持自定义配置picker插件级数支持无限级注意事项:插件传入数据格式为children树 ...
微信小程序云开发项目-个人待办事项-02今日模块开发
上一篇: 微信小程序云开发项目-个人待办事项-01介绍 https://blog.csdn.net/IndexMan/article/details/124485626 模块开发步骤本篇介绍今日模块 ...
uniapp自定义picker城市多级联动组件
uniapp自定义picker城市多级联动组件支持多端--h5.app.微信小程序.支付宝小程序... 支持自定义配置picker插件级数支持无限级注意事项:插件传入数据格式为children树 ...
es6 获取本月本年_微信小程序之ES6与事项助手
本文发表至今已有一段时间,错别字多.文笔混乱.内容过于陈旧.本人建议读者不必细究,大概浏览即可,最新的开发指南还是以官方文档为准,该博文的示例代码经过了重构,已经与官方文档同步,可能与文中的代码片段有 ...
C++ OP相关注意事项
C++ OP相关注意事项 Paddle中Op的构建逻辑 1.Paddle中Op的构建逻辑 Paddle中所有的Op都继承自OperatorBase,且所有的Op都是无状态的,每个Op包含的成员变量只有 ...
Hashing散列注意事项
Hashing散列注意事项 Numba支持内置功能hash(),只需__hash__()在提供的参数上调用成员函数即可 .这使得添加对新类型的哈希支持变得微不足道,这是因为扩展APIoverload_ ...
android 读取asset下的文件注意事项
注意事项:file:后面是三个斜杠,后面是android_asset,在后面就是html的名字.
Djang1.8+Python2.0迁移到Django2.0+Python3.6注意事项（转）
Djang1.8+Python2.0迁移到Django2.0+Python3.6注意事项参考:https://blog.csdn.net/weixin_40475396/article/detail ...
【整理】NSTimer使用及注意事项
一.NSTimer的创建 // 创建一个定时器,但是么有添加到运行循环,我们需要在创建定时器后手动的调用 NSRunLoop 对象的 addTimer:forMode: 方法. + (NSTimer ...

picker使用以及注意事项

picker使用

picker使用以及注意事项相关推荐

最新文章

热门文章