评论

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

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

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

效果图:

额,这个视频转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

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

https://developers.weixin.qq.com/s/86cgzxmp7dyp

最后一次编辑于  05-05  
点赞 43
收藏
评论

23 个评论

  • 订阅happiness
    订阅happiness
    2020-06-05

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

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

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

    2020-01-17
    赞同 1
    回复 1
    • 订阅happiness
      订阅happiness
      2020-01-17
      问题已修复,感谢反馈
      2020-01-17
      4
      回复
  • 大余
    大余
    04-27
    .t.
    04-27
    赞同
    回复
  • arthur
    arthur
    01-19

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

    01-19
    赞同
    回复 1
    • 订阅happiness
      订阅happiness
      01-19
      你需要先打开 本地的 微信开发者工具 再访问链接。
      01-19
      回复
  • 丁艳
    丁艳
    2021-10-09

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

    2021-10-09
    赞同
    回复 4
  • 丁艳
    丁艳
    2021-10-09

    我把代码复制了 但是js中有报错

     Cannot read property '0' of undefined

        at Ui.onLoad (user.js? [sm]:20)

        at Ui.<anonymous> (VM226 WAService.js:2)

        at Ui.o.__callPageLifeTime__ (VM226 WAService.js:2)

        at ir (VM226 WAService.js:2)

        at VM226 WAService.js:2

        at cr (VM226 WAService.js:2)

        at a.<anonymous> (VM226 WAService.js:2)

        at K.<anonymous> (VM226 WAService.js:2)

        at K.emit (VM226 WAService.js:2)

        at Object.emit (VM226 WAService.js:2)(env: Windows,mp,1.05.2107090; lib: 2.20.0)

    2021-10-09
    赞同
    回复
  • undefined
    undefined
    2021-04-03

    雷霆嘎巴

    2021-04-03
    赞同
    回复 1
    • 订阅happiness
      订阅happiness
      2021-04-05
      很稳,清明 还逛社区
      2021-04-05
      回复
  • 芥子
    芥子
    2021-03-11

    大佬,想问一下这边设置是什么意思,我在项目中使用时候有时候会无法显示内容,wxml中没有未显示内容的标签,这大概是哪里的问题呢

    2021-03-11
    赞同
    回复 1
    • 订阅happiness
      订阅happiness
      2021-03-11
      写个代码片段给我。
      2021-03-11
      回复
  • chen
    chen
    2020-12-31

    大佬省市区的数据还有吗可以分享一下吗

    2020-12-31
    赞同
    回复 1
    • 订阅happiness
      订阅happiness
      2020-12-31
      代码片段里有。我有单独弄一个js文件。你打开代码片段可以看到。
      2020-12-31
      回复
  • 局外人
    局外人
    2020-07-14

    大佬,我用你的原生文件复制了下,我更改了index也为组件,然后把index(里面有pop-up组件),拿到页面显示,,页面显示不出选择的数据.

    2020-07-14
    赞同
    回复 6
    • 订阅happiness
      订阅happiness
      2020-07-14
      搞个代码片段发我。
      2020-07-14
      3
      回复
    • 局外人
      局外人
      2020-07-14回复订阅happiness
      代码全用你上传的那个代码,就是把里面的index页面文件改为组件文件了,然后在页面里面用index这个组件,代码一点没动.
      2020-07-14
      回复
    • 订阅happiness
      订阅happiness
      2020-07-14回复局外人
      你用我写的代码片段。改造成你现在这样然后发我。我给你改下。
      2020-07-14
      3
      回复
    • 局外人
      局外人
      2020-07-14回复订阅happiness
      我没改你的代码,就是把index这个文件,我改为了组件,然后放到页面使用,就变成上面图片那样了,代码一点没动.
      2020-07-14
      回复
    • 局外人
      局外人
      2020-07-14回复局外人
      我知道问题在哪了,页面传值到组件那里,组件和组件传值我还没设置,麻烦大佬了!
      2020-07-14
      回复
    查看更多(1)

正在加载...

登录 后发表内容