微信小程序自定义地址组件

项目需求

        需要调用后台传过来的地址，存储地址时存的是地址的id，所以市面上的地址组件均不符合我的需求，只能自定义一个。

技术选取

        picker-view和picker-view-column

核心代码

region.wxml

<!--地址选择器-->
<view wx:if="{
    {show}}" class="region-picker" catchtap="hidePicker">
  <view class="picker-handle" catchtap>
    <view class="picker-cancel" catchtap="hidePicker">取消</view>
    <view class="picker-confirm" catchtap="chooseRegion">确定</view>
  </view>
  <picker-view class="picker" value="{
    {regions}}" bindchange="changePicker" catchtap>
    <picker-view-column>
      <view wx:for="{
    {provinces}}" wx:key="code" class="region-province">{
  {item.name}}</view>
    </picker-view-column>
    <picker-view-column>
      <view wx:for="{
    {citys}}" wx:key="code" class="region-city">{
  {item.name}}</view>
    </picker-view-column>
    <picker-view-column>
      <view wx:for="{
    {areas}}" wx:key="code" class="region-area">{
  {item.name}}</view>
    </picker-view-column>
  </picker-view>
</view>

region.less

.region-picker {
   
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.6);

  .picker-handle {
   
    width: 100%;
    height: 72rpx;
    display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: 500rpx;
    left: 0;
    background: #fff;
    box-sizing: border-box;
    padding: 0 30rpx;
    line-height: 72rpx;
    box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.6);

    .picker-cancel,
    .picker-confirm {
   
      font-size: 30rpx;
    }

    .picker-cancel {
   
      color: #9E9E9E;
    }

    .picker-confirm {
   
      color: #018A56;
    }
  }

  .picker {
   
    width: 100%;
    height: 500rpx;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #fff;

    .region-province,
    .region-city,
    .region-area {
   
      text-align: center;
      font-size: 24rpx;
    }
  }
}

region.js

const app = getApp();
Component({
   
  /**
   * 组件的属性列表
   */
  properties: {
   
    // 是否展示选择器
    showPicker: {
   
      type: Boolean,
      value: false
    },
    // 初始省市区数组
    initRegions: {
   
      type: Array,
      value: []
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
   
    // 当前省市区  0 省  1 市  2 区
    regions: [0, 0, 0],
    // 滑动选择器之前的省市区信息
    oldRegions: [0, 0, 0],
    // 上一次选中的省市区信息
    prevRegions: [0, 0, 0],
    // 省列表
    provinces: [],
    // 市列表
    citys: [],
    // 区列表
    areas: [],
    // 省
    province: {
   
      name: '',
      code: ''
    },
    // 市