级联效果在Uview2.0中的实现

级联效果在Uview2.0中的实现。

假设需要一个【省,市,区】的三级联动,你会怎么用uview2.0做?

首先,回顾其他组件库,基本上都让你传递一个树状数组,然后级联选择啥的都不需要操心。一般这类组件都叫做cascader,但是uview2.0并未有cascader组件,你只能选择使用picker。

那么picker咋用呢?

首先,注意这俩属性,分别代表每列数据&每列选中的下标,后面回显会用到。

其次,在change函数,会在每次滑动选项后触发。

通过解构出的columIndex可以判断是第几列被滑动了,而index则是代表该列目前被选中的下标是几。

所以咱们理清逻辑

  • 当第一列滑动的时候,咱们需要决定第二列、第三列的数据到底显示什么
  • 当第2列滑动的时候,咱们需要决定第3列的数据到底显示什么
scss 复制代码
picker.setColumnValues(1, children1);
picker.setColumnValues(2, children2)

//这里的children1,children2都是咱们自行生成的数组,形如【'a','b','c'】

最后,咱们选择完成后触发confirm,此时务必记得改变columns和defaultIndex的值,不然下次打开仍是初始值,没有回显。

最后的最后,我还有个困惑,uview2.0并没有dropdown下拉菜单的组件,这个到底该怎么办。

相关推荐
钛态4 小时前
前端安全防线:CSRF 攻击链路与双重 Token 校验的工程实现
前端·vue·react·web
张拭心5 小时前
技术管理笔记:让我“燃尽”的一天
前端
不好听6136 小时前
BFF 架构实战:从前端直调 API 到加入中间层
前端·架构
不好听6136 小时前
前端跨域完全指南:从为什么报错到三种解决方案
前端
三8446 小时前
路由策略/控制 配置双点双向路由重发布
服务器·前端·javascript
Qimooidea7 小时前
祁木 CAD Translator 工程图纸出海实战指南
服务器·前端·安全
小林ixn7 小时前
从BFF到SSE:我在Vue项目里藏了个“AI翻译官”
前端·vue.js·vite
元气少女小圆丶8 小时前
unity发布web嵌入到前端页面的接受参数
前端·unity·webgl
工业HMI实战笔记8 小时前
【拯救HMI】:低碳制造:自动化技术如何助力企业节能降耗
运维·前端·自动化·交互·制造
不简说10 小时前
JS 代码技巧 vol.4 — 10 个异步并发控制,Promise.all 这帮兄弟的踩坑实录
前端·javascript·面试