微信小程序省市区三级联动组件

使用

npm i vi-address 使用微信开发者工具构建NPM并勾选使用NPM模块

打开小程序页面的json配置.

"usingComponents": {
  "vi-address": "/vi-address"
}

WXML结构

<view class="font14" bindtap='selectAddress'>点击选择城市: {{address}}</view>

<vi-address is-hide="{{isHide}}" bindhide="selectAddress" bindaddresschange="addressChange"></vi-address>

js逻辑

Page({
  data: {
    address: '',
    isHide: false
  },
  selectAddress(e) {
    this.setData({
      isHide: !this.data.isHide
    })
  },
  addressChange({ detail }) {
    this.setData({
      address: detail.detail.map(item => item.name).join('-')
    })
  }
})

属性 Props

| 接口 | 数据类型 | 说明 | 选项 | 默认值 | | :--: | :--: | :--: | :--: | :--: | | isHide | Boolean | 控制组件的显示与隐藏, false 隐藏, true 显示 | 必填 | false | | areaHide | Boolean | 是否显示区/县, false 显示, true 隐藏 | 选填 | false |

事件 Events

| 事件方法 | 事件说明 | detail 返回值 | | :--: | :--: | :--: | | cancel | 组件的取消按钮或者是点击的遮罩层 | 无返回值 | | confirm | 组件的确认按钮 | 返回选择的城市 | | hide | 组件隐藏, cancel 与 confirm 都会触发该事件 | 返回值为触发的事件源, 如：取消按钮触发的事件, 则返回值为 cancel | | addresschange | 省市区选择事件 | 只要有选择便会触发该事件, 组件初始化时会默认触发一次, 返回值为数组集合 |

Bug&Tips

• 地址三级联动组件,显示与隐藏有默认动画,所以不需要给组件父级元素套一个处理动画的Propu组件
• 该组件使用的选择器为微信小程序的 picker-view 内置组件, 所以对用户体验可能会存在一定影响
• 由于是使用picker-view 内置组件，所以该组件暂无设置初始默认值的接口。目前正在尝试其他解决方式