小程序自制省市区选择器

949 阅读1分钟

其实这篇文章也是我自己想要保存一下而已,公司的需要用到自己的地址库,然后就写了这样的需求。

wxml代码如下(效果就是很普通的省市区选择器)

  <view class='site-v dflex  no-bot'>
    <view class='site-l c6'>收货地址</view>
    <picker class='flex-1 site-sex {{address?"":"cc"}}' mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{site}}" range="{{siteRange}}" range-key="areaName">{{address?address:'选择省市区'}}
      <icon class='iconfont iconenter site-icon'></icon>
    </picker>
  </view>

js部分(只截取了关于选择器的代码)

   onLoad: function (options) {
     address.getAllArea().then(res => {
        // console.log(res)
        let temp = res.d.province_0;//省市区三维数组
        let siteRange = [temp, temp[0].city, temp[0].city[0].area]
        this.setData({
          provinces: temp,//保存三维数组
          siteRange,//当前显示的省市区
          site: [0, 0, 0]
        })
      })
   }
    
  data: {
    address:'',//省市区选择
    siteRange:[],//省市区选择器
    provinces:[],
  },
  
     //点击确定
  bindMultiPickerChange(e){
    // console.log('picker发送选择改变,携带值为', e.detail.value);
    const siteRange = this.data.siteRange
    // console.log(siteRange[0][e.detail.value[0]].areaName, siteRange[1][e.detail.value[1]].areaName, siteRange[2][e.detail.value[2]].areaName)
    this.setData({
      site: e.detail.value,
      address: siteRange[0][e.detail.value[0]].areaName +''+ siteRange[1][e.detail.value[1]].areaName +''+ siteRange[2][e.detail.value[2]].areaName,
      provinceName: siteRange[0][e.detail.value[0]].areaName,
      cityName: siteRange[1][e.detail.value[1]].areaName,
      districtName: siteRange[2][e.detail.value[2]].areaName,
      provinceId: siteRange[0][e.detail.value[0]].id,
      cityId: siteRange[1][e.detail.value[1]].id,
      districtId: siteRange[2][e.detail.value[2]].id,
    })
  },
        //滑动
  bindMultiPickerColumnChange(e){
    // console.log('修改的列为', e.detail.column, ',值为', e.detail.value);
    var data = {
      siteRange: this.data.siteRange,
      site: this.data.site,
      provinces: this.data.provinces
    };
    // 修改省
    if (e.detail.column==0){
      data.site = [e.detail.value,0,0]
      data.siteRange = [data.provinces, data.provinces[e.detail.value].city, data.provinces[e.detail.value].city[0].area]
      this.setData({
        site: data.site,
        siteRange: data.siteRange
      })
    }
    //修改市
    if (e.detail.column==1){
      // data.siteRange[1][e.detail.value].area
      data.siteRange[2] = data.siteRange[1][e.detail.value].area
      data.site[1] = e.detail.value
      data.site[2]=0
      this.setData({
        siteRange: data.siteRange,
        site: data.site,
      })
    }
  },