关于微信小程序用picker-view自制滑动选择器那些事

关于微信小程序用picker-view自制滑动选择器那些事

• 首先碰到的 就是各种数据拿不到的问题
  然后找了后端帮忙 把数据传上来

• 然后就是调用接口时的疯狂采坑

  1. js的异步我现在还搞不懂是个什么原理 但是如果把 省/市/县/街 分开请求的话 那就会导致同时请求时 数据不会更新的问题 换而言之 就是换了个省但是只变了市 县和街就全卡bug 非常的呆
     解决方法
     就是四个接口放一个方法里 然后bindchange触发时 就直接一个个接口调用 上一个接口得到的值 传给下一个接口 这样就能保证实时动态的更新了
  2. 关于越位的问题，就是比如北京只有一个北京市，然后你找了个其他省，疯狂往下拉 拉到最底 然后回到北京时 就会报错 这是因为当前索引的数组位置 没有东西 是个空的
     解决方法
     这时候就要加个判断 如果索引的位置比新得到的数组长时 就给他归零。然后就能正常地使用了

• 大致的代码如下 对了 刚开始onload的时候 要加载最初始的省市县街 我这边最开始的 是北京啥的

• js部分

  //地区选择器
  showAddressChoose() {
    console.log(this.data.address);
    this.setData({
      shadeShow: true,
      chooseType: 6
    })
  },
  async AddressChange(e) {
    let index = e.detail.value;
    let {
      address,
      provinceList,
    } = this.data
    address.province_id = provinceList[index[0]].provinceCode
    address.province_name = provinceList[index[0]].provinceName
    const res = await request({
      url: "/cmsService/provinceLinkage/getCity/" + provinceList[index[0]].provinceCode,
      method: "GET"
    })
    let cityTempList = res.data.data.cityList
    console.log(index[1]);
    console.log(cityTempList.length);
    if (index[1] >= cityTempList.length) {
      console.log();
      index[1] = 0
      index[2] = 0
      index[3] = 0
    }
    address.city_id = cityTempList[index[1]].cityCode
    address.city_name = cityTempList[index[1]].cityName
    const res2 = await request({
      url: "/cmsService/provinceLinkage/getArea/" + cityTempList[index[1]].cityCode,
      method: "GET"
    })
    let areaTempList = res2.data.data.areaList
    if (index[2] >= areaTempList.length) {
      index[2] = 0
      index[3] = 0
    }
    address.area_id = areaTempList[index[2]].areaCode
    address.area_name = areaTempList[index[2]].areaName
    const res3 = await request({
      url: "/cmsService/provinceLinkage/getStreet/" + areaTempList[index[2]].areaCode,
      method: "GET"
    })
    let streetTempList = res3.data.data.streetList
    console.log(index[3]);
    console.log(streetTempList.length);
    if (index[3] >= streetTempList.length) {
      index[3] = 0
    }
    address.street_id = streetTempList[index[3]].streetCode
    address.street_name = streetTempList[index[3]].streetName
    let temp = "我不为空"
    this.setData({
      address: address,
      totalAddress_now: temp,
      index: index,
      cityList: res.data.data.cityList,
      areaList: res2.data.data.areaList,
      streetList: res3.data.data.streetList
    })
  },
  okbut6() {
    let totalAddress_now = this.data.totalAddress_now
    console.log(totalAddress_now);
    let {
      address,
      provinceList,
      cityList,
      areaList,
      streetList,
      index
    } = this.data
    let temp = ""
    if (totalAddress_now == "") {
      temp = provinceList[0].shortName + cityList[0].cityName + areaList[0].areaName + streetList[0].streetName
      address.totalAddress = temp
      this.setData({
        totalAddress_now: "我不为空",
        shadeShow: false
      })
    } else {
      temp = provinceList[index[0]].shortName + cityList[index[1]].cityName + areaList[index[2]].areaName + streetList[index[3]].streetName
      address.totalAddress = temp
      this.setData({
        shadeShow: false
      })
    }
    address.totalAddress = temp
    console.log("我是address");
    console.log(this.data.address);
    console.log(address);
    this.editInfo(9, address)
  },
  nobut6() {
    this.setData({
      shadeShow: false
    })
  },

• wxml部分

  <!-- 地址选择器 -->
  <view wx:if="{{chooseType==6}}">
    <view class="content_body area_choose">
      <view class="title2">选择地区</view>
      <!-- 省 -->
      <picker-view indicator-style="height:50px" style="width:100%;height:300px;" bindchange="AddressChange">
        <picker-view-column>
          <view wx:for="{{provinceList}}" wx:key="{{provinceList}}" class="scroll_view">{{item.shortName}}
          </view>
        </picker-view-column>
        <!-- 市 -->
        <picker-view-column>
          <view wx:for="{{cityList}}" wx:key="{{cityList}}" class="scroll_view">{{item.cityName}}
          </view>
        </picker-view-column>
        <!-- 县 -->
        <picker-view-column>
          <view wx:for="{{areaList}}" wx:key="{{areaList}}" class="scroll_view">{{item.areaName}}
          </view>
        </picker-view-column>
        <!-- 街道 -->
        <picker-view-column>
          <view wx:for="{{streetList}}" wx:key="{{streetList}}" class="scroll_view">{{item.streetName}}
          </view>
        </picker-view-column>
      </picker-view>
      <view class="buts">
        <view class="nobut" bindtap="nobut6">取消</view>
        <view class="okbut" bindtap="okbut6">确定</view>
      </view>
    </view>
  </view>