评论

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

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

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

效果图:

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

  • own
    own
    2020-06-17

    选到最后一个就报错了

    2020-06-17
    赞同
    回复 5
    • 订阅happiness
      订阅happiness
      2020-06-17
      第几列选到最后一个。
      2020-06-17
      3
      回复
    • 订阅happiness
      订阅happiness
      2020-06-17
      2020-06-17
      2
      回复
    • own
      own
      2020-06-17回复订阅happiness
      没事了  我的问题
      2020-06-17
      回复
    • own
      own
      2020-06-17
      现在是选择时 取消在显示  显示错误
      2020-06-17
      回复
    • 订阅happiness
      订阅happiness
      2020-06-17回复own
      👌
      2020-06-17
      1
      回复
  • 🔅曲水
    🔅曲水
    2020-06-04

    请问数据回显怎么做呀。需求是编辑的时候,需要回显之前选择的省市区。

    2020-06-04
    赞同
    回复 10
    • 订阅happiness
      订阅happiness
      2020-06-04
      弹起来的时候需要自动选择 之前选择的是吗?
      2020-06-04
      3
      回复
    • 订阅happiness
      订阅happiness
      2020-06-04
      需要知道之前选择省市区的code。在onLoad的时候进行回填即可。
      2020-06-04
      3
      回复
    • 订阅happiness
      订阅happiness
      2020-06-04
      2020-06-04
      2
      回复
    • 🔅曲水
      🔅曲水
      2020-06-04回复订阅happiness
      基本上是这样,不过还有一个场景是,组件已经加载完成了,此时再塞值给组件,回显省市区。
      如图,选择乙方全称后,带出公司地址,做回显。
      2020-06-04
      回复
    • 订阅happiness
      订阅happiness
      2020-06-04回复🔅曲水
      那你可以重新赋值一遍就好了呀
      2020-06-04
      3
      回复
    查看更多(5)
  • 积极向上的小李
    积极向上的小李
    2020-06-01

    我这块 修改了一下,然后默认显示北京,在点击北京就是空的,如果选择了别的城市,在选择北京 才可以,大佬有时间的时候,麻烦指导下

    2020-06-01
    赞同
    回复 6
    • 订阅happiness
      订阅happiness
      2020-06-01
      具体是指?需要默认展示北京是么?
      2020-06-01
      3
      回复
    • 积极向上的小李
      积极向上的小李
      2020-06-01回复订阅happiness
      把你的原版代码撸下来,按照我的需求做了部分改动,现在是默认展示的是北京,但是点开picker选择北京就是空的,如果先选择了别的城市在选择北京,才会显示
      2020-06-01
      1
      回复
    • 订阅happiness
      订阅happiness
      2020-06-01回复积极向上的小李
      改动的代码能贴个代码片段么??
      2020-06-01
      3
      回复
    • 订阅happiness
      订阅happiness
      2020-06-01回复积极向上的小李
      你现在想实现什么样式。我看下我能不能给你改。
      2020-06-01
      4
      回复
    • 积极向上的小李
      积极向上的小李
      2020-06-02回复订阅happiness
      问题已修复,感谢大佬
      2020-06-02
      回复
    查看更多(1)
  • Rick
    Rick
    2020-05-28

    请问选中的文字,颜色可以自定义吗?如何自定义呢

    2020-05-28
    赞同
    回复 5
    • 订阅happiness
      订阅happiness
      2020-05-28
      选中的文字??是指点确定后的还是 下面滚动区域的文字
      2020-05-28
      回复
    • 订阅happiness
      订阅happiness
      2020-06-02
      2020-06-02
      3
      回复
    • 积极向上的小李
      积极向上的小李
      2020-06-02
      谢谢大佬,
      2020-06-02
      回复
    • Rick
      Rick
      2020-06-02回复订阅happiness
      大佬啊(捂脸),最近一直在忙,都没看到你回复我了,而且还回复了代码,真是感谢啊!!!XD
      2020-06-02
      回复
    • 订阅happiness
      订阅happiness
      2020-06-02回复Rick
      2020-06-02
      1
      回复
  • YL
    YL
    2020-05-06

    很棒。非常感谢

    2020-05-06
    赞同
    回复
  • 信仰2
    信仰2
    2020-04-14

    不知道为毛帖子收藏不了

    2020-04-14
    赞同
    回复 11
    • 订阅happiness
      订阅happiness
      2020-04-14
      可以呀。
      2020-04-14
      2
      回复
    • 信仰2
      信仰2
      2020-04-14回复订阅happiness
      你好 想问问在哪里可以初始化这个picker呢 比如我一进来要选择广东省广州市白云区
      2020-04-14
      回复
    • 订阅happiness
      订阅happiness
      2020-04-14回复信仰2
      onLoad里哈。
      2020-04-14
      1
      回复
    • 订阅happiness
      订阅happiness
      2020-04-14回复信仰2
      onLoad(options) {
          // 默认联动显示北京
          var id = address.provinces[18].id 
          this.setData({
            provinces: address.provinces, // 34省
            citys: address.citys[id], //默认北京市辖区
            areas: address.areas[address.citys[id][0].id],
            value: [18, 0, 5],
            regionValue: [18, 0, 5],
          })
        },
      2020-04-14
      3
      回复
    • 订阅happiness
      订阅happiness
      2020-04-14
      18,0,5是广东广州白云区的下标。这个可以在你选择后 appData的value里查看。
      2020-04-14
      2
      回复
    查看更多(6)
  • 小D
    小D
    2020-03-29

    您好!初始进入页面时点击选择地址,地址选择器点取消,再点选择地址,选默认确定,北京的地址无法正常显示,如果初始页面点击选择地址,地址选择器点确定可以正常显示北京的地址,这算是一个BUG

    2020-03-29
    赞同
    回复 2
    • 订阅happiness
      订阅happiness
      2020-03-31
      收到。我查看下。。
      2020-03-31
      3
      回复
    • 订阅happiness
      订阅happiness
      2020-03-31
      问题已修复,感谢反馈
      2020-03-31
      3
      回复
  • 小D
    小D
    2020-03-29

    您好!请问点击外面取消弹窗怎么实现?类似于于原生picker的bindcancel()方法

    2020-03-29
    赞同
    回复
  • 夕颜妃子笑
    夕颜妃子笑
    2020-03-27

    又是一个摩拜小弟

    2020-03-27
    赞同
    回复
  • 韩全涛
    韩全涛
    2020-02-29

    您好,数据源能提供一下吗?

    2020-02-29
    赞同
    回复 5
    • 订阅happiness
      订阅happiness
      2020-03-02
      在代码片段里。
      2020-03-02
      2
      回复
    • 韩全涛
      韩全涛
      2020-03-02回复订阅happiness
      我指city.js那个文件
      2020-03-02
      回复
    • 订阅happiness
      订阅happiness
      2020-03-02
      代码片段里有city.js那个文件吖。你是问我这个文件哪里来的么 还是?
      2020-03-02
      2
      回复
    • 韩全涛
      韩全涛
      2020-03-02回复订阅happiness
      能分享一下这个文件的下载地址码?
      2020-03-02
      回复
    • 订阅happiness
      订阅happiness
      2020-03-02
      不是,老哥 我放代码片段里了。你直接拷贝出来就可以用了呀。
      2020-03-02
      2
      回复

正在加载...

登录 后发表内容