vi-address

微信小程序地址三级联动组件

Usage no npm install needed!

<script type="module">
  import viAddress from 'https://cdn.skypack.dev/vi-address';
</script>

README

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

使用

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