关于uniapp的picker的使用

£神魔★判官ぃ 2023-07-25 14:01 112阅读 0赞

最近入职的一家公司是基于uniapp开发app的,很多东西不懂,最近遇到一个关于picker选择的问题

要求二级联动,左边选择省份,右边选择市

在这里插入图片描述
但是picker的原生的选择只有
在这里插入图片描述
这样的三级联动,没有选择省然后再选择市这样单独选择的模式

然后我去uniapp的官网查看了 picker的描述和属性:
mode属性:
它有五个属性值

  1. mode = selector 表示普通选择器

































属性名 说明
range 这个是picker展示的用于选择的数据,数据格式为Array或者Object格式
range-key 这是展示的数据的值,当range的数据是一个数组包裹对象的格式,通过它来表示显示对象的那个属性
value 这属性表示显示的下标,就是表示选择了range的第几个(就是选择的值相对于的下标,是从0开始的)
@change 用于定义改变了(选择了列表)的事件,其中event.detail 的值就是当前选择的下标
disabled 表示是否禁用,就是是否可以触发选择事件,如果值为true表示改picker不可以选择
@cancel 取消选择或点遮罩层收起 picker 时触发
  1. mode = multiSelector 表示多列选择器





































属性 说明
range 这里的是展示的数据,这里的数据应该是一个二维数组,就是数组包对象,对象再包数组的格式
range-key 这个表示需要显示的数据的键值对中的键
value 他的值是下标从0开始
@change value 改变时触发 change 事件,event.detail = {value: value}
@columnchange 这是多列显示特有的事件,当某一列发生改变的时候触发,event.detail = {column: column, value: value},column表示改变的列,value表示改变的当列的下标的值
@cancel 取消选择时触发的事件
disabled 表示改选择框是否禁用,默认值为false

因为JavaScript的限制不可以检测数组的下标发生改变或者通过数组的下标来修改数组对应的值
在这里插入图片描述
但是再微信开发工具的pc模拟器可能出现拖动数据错乱,但是真机使用正常

解决办法,使用splice方法通过下标改对应数组的数据即可
在这里插入图片描述
对于vue的解决办法有两种,一个是用set方法,另外一个是使用 splice方法
在这里插入图片描述

  1. mode = time 表示时间选择器

































属性 说明
value 表示选中的时间,格式为”hh:mm”
start 表示有效时间范围的开始,格式为字符串,字符串格式为”hh:mm”(App不支持)
end 表示有效时间范围的结束,格式为字符串,字符串格式为”hh:mm”(App不支持)
@change value 改变时触发 change 事件,event.detail = {value: value}
@cancel 取消选择时触发的事件
disabled 表示是否禁用改选择框,默认值为false
  1. mode = date 表示日期选择器





































属性 说明
value 表示选中的日期,格式为”YYYY-MM-DD”
start 表示有效日期范围的开始,字符串格式为”YYYY-MM-DD”
end 表示有效日期范围的结束,字符串格式为”YYYY-MM-DD”
fields 有效值 year,month,day,表示选择器的粒度,默认为day,year表示选择粒度为年,month表示选择选择选择的粒度为月
@change value 改变时触发 change 事件,event.detail = {value: value},同上表示下标
@cancel 取消选择时触发的事件
disabled 是否禁用,默认值为false
  1. mode = region 表示地区选择器
    多列picker方式的地区选择不能运行在支付宝小程序上,只有基于picker-view的可以全端运行





























属性 说明
value 表示选中的省市区,默认选中每一列的第一个值,数组格式
custom-item 可为每一列的顶部添加一个自定义的项
@change value 改变时触发 change 事件,event.detail = {value: value},同上
@cancel 取消选择时触发
disabled 是否禁用,默认值为false
  1. <view class="list">
  2. <view class="school">
  3. <picker mode="selector" :range="provinceData" range-key="label" @change="sheng">
  4. <image class="arrow_down" src="/static/images/login_arrow_down.png" mode=""></image>
  5. <text class="check_school">{ { province}}</text>
  6. </picker>
  7. </view>
  8. <view class="class">
  9. <picker mode="selector" :range="city1" range-key="label" :disabled='jy' @change="shi">
  10. <image class="arrow_down" src="/static/images/login_arrow_down.png" mode=""></image>
  11. <text class="check_school">{ { cityy}}</text>
  12. </picker>
  13. </view>
  14. </view>
  15. sheng(e){
  16. var _this = this
  17. console.log(e);
  18. var index = e.detail.value
  19. _this.province = _this.provinceData[index].label
  20. _this.city1 = _this.city[index]
  21. // console.log(JSON.stringify(_this.city1));
  22. _this.jy = false
  23. }
  24. shi(e){
  25. var _this = this
  26. var index = e.detail.value
  27. _this.cityy = _this.city1[index].label
  28. },

关于城市的数据,是引入uniapp对应的城市的包,
结果研究发现它们的城市的数据是关于下标对应的,就是说第一个省份的包的对应省的下标,就是关于市列表包对应的下标
在这里插入图片描述
在这里插入图片描述
所以只需要通过value获取当前选择的省份,再通过对应的下标获取对应的市级别的列表即可
这里需要注意的是,需要对市和一下的级别的选择添加一个禁止属性,因为对于逻辑上来说,只有选择省分后才能选择市

发表评论

表情:
评论列表 (有 0 条评论,112人围观)

还没有评论,来说两句吧...

相关阅读