vi-address

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

使用

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 内置组件，所以该组件暂无设置初始默认值的接口。目前正在尝试其他解决方式