评论

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

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

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

效果图:

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

最后一次编辑于  2天前  
点赞 44
收藏
评论

23 个评论

  • 种个月亮叭
    种个月亮叭
    2020-01-19

    [{

    "code": "129"

    "name": "北京市"

    "children": [{

    "code": "8285"

    "countyList": null

    }]

    }, {

    "code": "130"

    "name": "天津市"

    "children": [{

    "code": "7926"

    "name": "天津市"

    }]

    }]

    有时候哦我们的省市区格式是这样的,这种咋用啊



    2020-01-19
    赞同
    回复 1
    • 订阅happiness
      订阅happiness
      2020-01-19
      格式都可自定义的。只是前端获取的方式需要改下。
      2020-01-19
      2
      回复
  • 假装在上海
    假装在上海
    2020-01-06

    console.log('adress select something error')


    这个address拼写错了 大佬

    2020-01-06
    赞同
    回复 1
    • 订阅happiness
      订阅happiness
      2020-01-06
      已修改,阿里嘎多
      2020-01-06
      2
      回复
  • 小肥羊
    小肥羊
    2019-12-20

    习惯了,见到大佬的文章,不由自主会先赞后收藏

    2019-12-20
    赞同
    回复

正在加载...

登录 后发表内容