评论

如何实现一个自定义数据版省市区二级、三级联动

自定义数据版本省市区二级、三级联动

社区可能有其他的方案了,但是再分享下吧,给有需要的童鞋。

效果图:

额,这个视频转GIF因为社区上传不了大图,所以剪了一部分,具体的效果还是直接工具打开代码片段预览吧~

第一步:你的页面JSON引入该组件:

{
    "usingComponents": {
        "city-picker": "/components/cityPicker/index"
      }
}

第二步:你的页面WXML引入该组件

<city-picker visible="{{visible}}" column="2" bind:close="handleClick" bind:confirm="handleConfirm" />

第三步:你的页面JS调用

// 显示/隐藏picker选择器
handleClick() {
  this.setData( 
    visible: !this.data.visible
  })
},

// 用户选择城市后 点击确定的返回值
handleConfirm(e) {
  const { 
    detail: { 
      provinceName = '', 
      provinceId = '', 
      cityName, 
      cityId='', 
      areaName = '', 
      areaId = ''
     } = {} 
  } = e
  this.setData({
    cityId,
    cityName,
    areaId,
    areaName,
    provinceId,
    provinceName
  })
}

组件属性

属性 默认值 描述
visible false 是否显示picker选择器
column 3 显示几列,可选值:1,2,3
values [0, 0, 0] 必填,默认回填的省市区下标,可选择具体省市区后查看AppData的regionValue字段
close function 点击关闭picker弹窗
confirm function 点击选择器的确定返回值

confirm:

属性 默认值 描述
provinceName 北京市 省份名称
provinceId 110000 省份ID
cityName 市辖区 城市名称
cityId 110100 城市ID
areaName 东城区 区域名称
areaId 110000 区域Id

至于怎么获取你想默认城市的下标,可以滑动操作下选中省市区后,点击确定后查看appData里的regionValue的值。

以上就是一个自定义数据版本的省市区二级、三级联动啦,老规矩,结尾放代码片段。

https://developers.weixin.qq.com/s/F9k9cTmT7LAz

最后一次编辑于  2022-07-20  
点赞 46
收藏
评论

27 个评论

  • 第57个民族-上班族
    第57个民族-上班族
    2020-06-05

    20200605 修复picker第一列滑动过快还未暂停就点击确定,输出异常的问题。

    2020-06-05
    赞同 3
    回复
  • @陳
    @陳
    2020-01-17

    picker滚动到别的省份,然后点击取消,再显示的话会出错

    2020-01-17
    赞同 1
    回复 1
  • 罐装冰块.
    罐装冰块.
    2023-05-22

    大佬,为什么我value设置为5,第一列默认还是北京啊

    2023-05-22
    赞同
    回复 1
  • 小刀 AI模型
    小刀 AI模型
    2023-03-01

    楼主的 pop-up 标签是自定义的?貌似 visible 设置无效了,搜索了下有 popup, van-popup, 一大堆写法,但官方文档竟然搜不到,真是无奈得很。

    2023-03-01
    赞同
    回复 1
    • 第57个民族-上班族
      第57个民族-上班族
      2023-03-02
      自定义组件,查看引入的位置 就知道了。
      2023-03-02
      回复
  • 蓝天☁
    蓝天☁
    2022-08-25

    https://developers.weixin.qq.com/community/develop/doc/0000e6a4b8ca4874f46ea87455bc00

    大佬们,帮看下这个怎么弄?

    2022-08-25
    赞同
    回复
  • Q1an
    Q1an
    2022-07-20

    选择广东省东莞市无效呢

    2022-07-20
    赞同
    回复 6
    • 第57个民族-上班族
      第57个民族-上班族
      2022-07-20
      因为city.js里没有放东莞市下的区
      2022-07-20
      回复
    • 第57个民族-上班族
      第57个民族-上班族
      2022-07-20
      东莞和中山都是空数组:
      2022-07-20
      回复
    • Q1an
      Q1an
      2022-07-20回复第57个民族-上班族
      city.js是否更新下,另外能通过npm的方式嘛,整个组件体积感觉有点大了呢
      2022-07-20
      回复
    • 第57个民族-上班族
      第57个民族-上班族
      2022-07-20
      city.js我可以更新下。npm的方式暂时不考虑。如果做成组件库会考虑的,单个组件就算了
      2022-07-20
      回复
    • 第57个民族-上班族
      第57个民族-上班族
      2022-07-20回复Q1an
      行政区划下 东莞市下面没有内容
      2022-07-20
      回复
    查看更多(1)
  • 三毛
    三毛
    2022-06-03

    这个item_active 在哪里定义的,怎么没有找到。 ?


    2022-06-03
    赞同
    回复 1
    • 三毛
      三毛
      2022-06-03
      我自己定义一个class 没生效,在wxss里
      2022-06-03
      回复
  • 大余
    大余
    发表于移动端
    2022-04-27
    .t.
    2022-04-27
    赞同
    回复
  • arthur
    arthur
    2022-01-19

    为啥一打开链接就显示“请打开工具手动导入,若未安装可点击下载”呜呜哭了

    2022-01-19
    赞同
    回复 1
    • 第57个民族-上班族
      第57个民族-上班族
      2022-01-19
      你需要先打开 本地的 微信开发者工具 再访问链接。
      2022-01-19
      回复
  • 丁艳
    丁艳
    2021-10-09

    麻烦大佬帮我看看 页面是空白

    2021-10-09
    赞同
    回复 4

正在加载...

登录 后发表内容