uniapp u-picker多列用法以及设置默认选中值
uview官方文档并未对多列操作和如何设置默认值做过多的说明,本文就其来做详细的使用解释:
一、简介
keyName="name" ,意思是把 name 作为 piker 选项显示的关键字columns作为一个数组,其内部有几个成员,则代表有当前piker有几列cancel、change、confirm 分别为取消、改变选值和确定执行的几个方法title为piker的顶部标题;loading为true时,会打开加载动画
二、 使用
本文的 columns = [changeLibList, changeDpartList] 里面有changeLibList 和changeDpartList 两个数组成员,changeLibList 为第一列数据,changeDpartList 为第二列数据。changeLibList 和 changeDpartList 数据结构大概如下所示:
每次打开页面时,在onShow勾子中重新请求接口数据 (防止数据在别的系统有所变化,如果你的数据是固定不变的,则只获取一次即可)
this.$refs.uPicker.setIndexs(0, 0) 设置第一列的默认选中值为第一个(微信小程序无法将picker实例传出来,只能通过ref操作),但此方法只适用于小程序,app用此方法后可能会造成列表不能滑动等bug
在每次切换时,调用 changeHandler方法请求接口拿到对应的第二列数据,赋值给changeDpartList,如下:
附:uview组件库 u-picker组件选项滑动选中延时、单列选择器默认选中
1、u-picker组件选项滑动选中延时的问题只需添加一个属性 :immediateChange='true'
2、单列选择器默认选中某一项只需添加一个属性,把指定下标给它 :defaultIndex="[1]"
总结
到此这篇关于uniapp u-picker多列用法以及设置默认选中值的文章就介绍到这了,更多相关u-picker多列用法与默认选中值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
栏目分类
- Povel Durev 中文站
- SWEAT中文网
你的位置:Povel Durev 中文站 > SWEAT中文网 >