平台兼容性
uni-app
app-vue | app-nvue | app-android | app-ios | app-harmony |
---|---|---|---|---|
? | ? | ? | ? | ? |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
? | ? | ? | ? | ? | ? | ? | ? | ? |
微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | 钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|---|---|---|---|---|
? | ? | ? | ? | ? | ? | ? | ? | ? |
快应用-华为 | 快应用-联盟 |
---|---|
? | ? |
uni-app x
app-android | app-ios |
---|---|
? | ? |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
? | ? | ? | ? | ? | ? | ? | ? | ? |
底部弹起picker组件,支持单列、双列联动、双列不联动、三列联动
使用说明:
props | 类型 | 说明 |
---|---|---|
mode | String | piker组件模式(例如:mode="one",表示单列) |
pickerList | Array | picker组件渲染数组 |
defaultIndex | Array | picker默认选中项索引,此项格式要结合mode(例如:mode="one",defaultIndex的格式就是一个长度为1的整数数组) |
data | 类型 | 说明 |
---|---|---|
pickerIndex | Array | picker索引值,表示当前选中项的索引 |
pickerShow | Boolean | 组件是否显示 |
特别注意:
- 点击确定按钮时返回值为当前选项的索引数组,使用者应当在调用处自行处理所需数据,这样可实现高可用性
- 当picker在滑动过程中点击确定按钮得到的值会与预期值不相符,这是原生组件本身的问题
- 使用该组件时一定要注意props内所需的数据格式,一定要满足其内最基本所需的格式,若另有所需,应当在其基础上补充,万不能改变其基本格式
基本格式示例:
当mode = "one"时
pickerList = [{ label: "一" }, { label: "二" }, { label: "三" }, ...... ]
当mode = "two_linkage"时
pickerList = [{ "label": "北京市", "children": [{ "label": "东城区" }, { "label": "延庆区" }, ...... ], }, { "label": "天津市", "children": [{ "label": "和平区" }, { "label": "河东区" }, ...... ], }, ...... ]
当mode = "two_nolinkage"时
pickerList = { firstArray: [{ label: "一" }, { label: "二" }, { label: "三" }, ...... ], secondArray: [{ label: "1" }, { label: "2" }, { label: "3" }, ...... ] }
当mode = "three"时
pickerList = [{ "label": "北京市", "children": [{ "label": "市辖区", "children": [{ "label": "东城区" }, { "label": "西城区" }, ...... ] }, ...... ] }, { "label": "天津市", "children": [{ "label": "市辖区", "children": [{ "label": "和平区" }, { "label": "河东区" }, ...... ], }, ...... ], }, ...... ]
具体示例请看GitHub (https://github.com/wzp110/wzpPicker)