微信小程序组件: 地址选择器

效果图 picker-address

这篇用到了刚刚发布的popup, 有需要可以去那里先看看

1. 设置初始值(可以为空, 如果不为空, 需要与文件中的名称一致);
2. 点击确定提交所选地址(名称和code都可以);
3. 样式问题可以查看文档
   https://developers.weixin.qq.com/miniprogram/dev/component/picker-view.html
4. 全国地址所用文件areaFile是我从哪里搞来的我忘记了。。。。。自己去翻翻，element-ui中或者vant中都有嘿嘿

补充：
https://segmentfault.com/a/1190000041395245/
⬆️ 这个网址里可以自己获取到地址的文件，选择需要的信息即可生成JSON文件😊

html ⬇️

<njx-popup show="{{show}}" titleText="请选择地址" bindsubmit="submit">
  <!-- picker-view里的wx:if是为了处理一个bug, 头一次打开时省列的数据打印出是赋值成功的, 可是页面显示有问题. 加上wx:if好了......但我不知道是什么机制😂 -->
  <picker-view wx:if="{{show}}" value="{{addressValue}}" bindchange="changeAddress" class="picker-view" indicator-class="picker-item-active">
    <picker-view-column>
      <view class="picker-item {{addressValue[0] === index ? 'active':''}}" wx:for="{{provinceList}}" wx:key="label">{{item.label}}</view>
    </picker-view-column>
    <picker-view-column>
      <view class="picker-item {{addressValue[1] === index ? 'active':''}}" wx:for="{{cityList}}" wx:key="label">{{item.label}}</view>
    </picker-view-column>
    <picker-view-column>
      <view class="picker-item {{addressValue[2] === index ? 'active':''}}" wx:for="{{regionList}}" wx:key="label">{{item.label}}</view>
    </picker-view-column>
  </picker-view>
</njx-popup>

css都是公共样式我懒得放了哈哈哈哈
js ⬇️

import list from "./areaFile";

Component({
  properties: {
    show: Boolean,
    value: String,
  },
  data: {
    list: null,
    addressValue: [0, 0, 0],

    provinceList: [],
    cityList: [],
    regionList: [],
  },
  methods: {
    initValue(value) {
      let addressValue = null;
      let cityList = [];
      let regionList = [];

      if (value === "") {
        cityList = list[0].children;
        regionList = list[0].children[0].children;
        addressValue = [0, 0, 0];
      } else {
        let addressArr = value.split(',');
        let provinceIndex = list.findIndex(item => item.label === addressArr[0]);
        let cityIndex = list[provinceIndex].children.findIndex(item => item.label === addressArr[1]);
        let regionIndex = list[provinceIndex].children[cityIndex].children.findIndex(item => item.label === addressArr[2]);
        cityList = list[provinceIndex].children;
        regionList = list[provinceIndex].children[cityIndex].children;
        addressValue = [provinceIndex, cityIndex, regionIndex];
      }

      this.setData({
        provinceList: list,
        cityList,
        regionList,
        addressValue
      })
    },
    changeAddress(e) {
      let value = e.detail.value;
      // 地址列表设置
      this.setData({
        cityList: list[value[0]].children,
        regionList: list[value[0]].children[value[1]].children,
      })

      if (value[2] !== this.data.addressValue[2]) {
        // 滑动区
        this.setData({
          addressValue: value
        })
      } else if (value[1] !== this.data.addressValue[1]) {
        // 滑动市
        this.setData({
          addressValue: [value[0], value[1], 0]
        })
      } else if (value[0] !== this.data.addressValue[0]) {
        // 滑动省
        this.setData({
          addressValue: [value[0], 0, 0]
        })
      }
    },

    submit() {
      const province = this.data.provinceList[this.data.addressValue[0]];
      const city = this.data.cityList[this.data.addressValue[1]];
      const region = this.data.regionList[this.data.addressValue[2]];

      const name = `${province.label},${city.label},${region.label}`;
      const code = `${province.value},${city.value},${region.value}`;

      this.triggerEvent('submit', {
        name,
        code,
      })
    },
  },
  observers: {
    show(show) {
      if (show) {
        this.initValue(this.data.value);
      }
    },
  }
})

使用页面html

<njx-picker-address show="{{addressPickerShow}}" value="{{address}}" bindsubmit="submitAddress"  />

使用页面js

Page({
  data: {
    list: [{
      label: "当前地址",
      value: "天津,天津市,河东区",
      componentName: "address"
    }, {
      label: "地址CODE",
      value: "",
    }],
    address: "",
    addressCode: "",
    addressPickerShow: false,
  },
  openEach(e) {
    const {
      name
    } = e.currentTarget.dataset;
    const index = this.data.list.findIndex(item => item.componentName === name);
    if (index === -1) return;
    const value = this.data.list[index].value;

    this.setData({
      [name]: value,
      [`${name}PickerShow`]: true
    })
  },
  submitAddress(e) {
    const {
      name,
      code
    } = e.detail;
    const nameIndex = this.data.list.findIndex(item => item.componentName === 'address');
    this.setData({
      address: name,
      addressCode: code,
      [`list[${nameIndex}].value`]: name,
      [`list[1].value`]: code,
      addressPickerShow: false,
    })
  }
})

💃tada~~~_{一个可以选择名称和CODE的pickerAddress就完成啦}~