微信小程序自定义省市县联动组件

微信小程序自定义省市县联动组件

呀,markdown不会用啊…

微信小程序自带picker,当mode = region时,就是使用自带的省市县选择器.
但是有一个缺点,就是省市县的名称有时会特别长,特别是选到一些少数民族地区时,导致展示出来的区域不好布局.
这里自己简单封装了一个省市县的组件.把一些很长的名字给简化了.
使用很简单.把组件region-picker放在小程序项目下,在.json文件中声明下,然后页面直接引用就可以了.
比如,需要在index页面引入该组件

• index.json需要如下配置:(后面的具体路径,改动下即可.)

{
  "usingComponents": {
    "region-picker": "/components/region-picker/region-picker"
  }
}

• 然后index.wxml直接使用:

<region-picker bind:change="addressChange"></region-picker>

• 最后在index.js中定义addressChange响应事件即可

  addressChange : function(event){
    console.log(event.detail);
  }

打印出来的结果:

其中indexArr指选中的省市县分别在对应列下的索引.不过这个值没什么用.
regionArr就是需要的结果.其中id是对应的主键,省市县的记录均保存在数据库里.这样就可以和后端交互了.

需要的小伙伴直接 git clone,里面也有省市县的SQL语句

git clone git@github.com:DarylHC/region-picker.git