uniapp多级联动选择器,区域选择组件分享

uniapp官方的多级联动选择器效果怎么样就不多说了,一言难尽。。。。

然后我对比了多个组件库,发现了uview组件库,里面有个picker选择器还可以,这是链接

但是在使用过程中也发现了该组件的一些问题

1、操作栏只能显示在顶部,不支持底部显示。

        现实问题是很多场景操作栏显示在底部更好,或者产品就是要底部显示的。。。

2、只能传递一些很直观的数据,比如直接就是文字

        我们在实际开发中,很多时候数据库中保存的是id,这里不够灵活,适配性不高

3、数据源比较复杂时,比如是对象数据,我们还需要手动写初始化和查找逻辑,比较麻烦

本着想着懒的态度,我在uview的基础上做了进一步封装,优化,成果如下

        1、基于uview封装的级联选择器,内置的地区数据

        2、支持单列,多列,自动识别层级

        3、支持自动去除重复名称:北京市-北京市-东城区---->北京市东城区

        4、支持操作按钮显示在顶部,或者底部

        5、支持三种模式传递默认值,可任选其一,如下

​                 index:[0,0,7],

​                 defaultIds: [1, 110000, 110106],

​                 defaultNames: ['北京市', '北京市', '房山区']

 具体效果和代码,已放入插件市场,可以直接引入使用,传送门

下面是部分页面效果图展示

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值