微信小程序（2）—— 自定义三级联动

三级联动是商品类程序常用的和必要的功能，不同的商家也有不同的三级联动选择，但是大都相同，下面是我自定义的三级联动，通过接口请求一级一级往下请求显示地址信息。
效果图：

实现思路：
省、城市、区都有自己的接口。
省：在请求省的时候，保存城市的参数以便请求城市接口使用（这时候省份会显示出来）。
城市：请求城市接口时，使用保存的城市的参数，进行城市信息显示，同时保存区的参数，以便情求区接口使用。
区：使用保存的区的参数，显示区的信息
注：我这里的代码是引入了colorUI
话不多说咱直接上代码

HTML:
<view class="cu-form-group margin-top">
      <view class="title">省份</view>
      <picker bindchange="PickerChange" value="{{index}}" range="{{sheng_name}}">
        <view class="picker">
          {{index?sheng_name[index]:'请选择'}}
        </view>
      </picker>
    </view>
    <!-- 城市选择 -->
    <view class="cu-form-group margin-top">
      <view class="title">城市</view>
      <picker bindchange="PickerChangeTo" value="{{indexs}}" range="{{cheng_name}}">
        <view class="picker">
          {{indexs?cheng_name[indexs]:'请选择'}}
        </view>
      </picker>
    </view>
    <!-- 区域选择 -->
    <view class="cu-form-group margin-top">
      <view class="title">区</view>
      <picker bindchange="PickerChangeXo" value="{{indexv}}" range="{{xian_name}}">
        <view class="picker">
          {{indexv?xian_name[indexv]:'请选择'}}
        </view>
      </picker>
    </view>

JS:
// pages/tack/tack.js
const app = getApp();
Page({
  /**
   * 页面的初始数据
   */
  data: {
    sheng:[],
    sheng_name:[],
    sheng_id:null,
    index:null,
    cheng:[],
    cheng_name:[],
    cheng_id:null,
    indexs:null,
    xian:[],
    xian_name:[],
    xian_id:null,
    indexv: null
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this
    wx.request({
      url: 'https://exam.qhynice.top/index.php/Api/Address/get_province',
      method:'POST',
      data:{},
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      success:function(res){
        var sheng = res.data.list
        var sheng_name = []
        for (var i in sheng) {
          sheng_name.push(sheng[i].name)
        }
        that.setData({
          sheng: sheng,
          sheng_name: sheng_name
        })
      }
    })
  },
  // 省份选择
  PickerChange(e) {
    let that = this
    var sheng_id = that.data.sheng[e.detail.value].id
    let indexs = 0
    that.setData({
      index: e.detail.value,
      sheng_id: sheng_id,
      indexs : indexs
    })
    that.data.index++
    wx.request({
      url: 'https://exam.qhynice.top/index.php/Api/Address/get_city',
      method:'POST',
      data:{
        sheng: that.data.index
      },
      header:{
        'content-type': 'application/x-www-form-urlencoded'
      },
      success:function(res){
        var cheng = res.data.city_list
        var cheng_name = []
        for (var i in cheng) {
          cheng_name.push(cheng[i].name)
        }
        that.setData({
          cheng: cheng,
          cheng_name: cheng_name
        })
      }
    })
  },
  // 城市选择
  PickerChangeTo(e){
    let that = this
    var cheng_id = that.data.cheng[e.detail.value].id
    that.setData({
      indexs: e.detail.value,
      cheng_id: cheng_id
    })
    that.data.indexs++
    wx.request({
      url: 'https://exam.qhynice.top/index.php/Api/Address/get_area',
      method: 'POST',
      data: {
        city: cheng_id,
        sheng: that.data.index
      },
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      success: function (res) {
        // console.log(res)
        var xian = res.data.area_list
        var xian_name = []
        for (var i in xian) {
          xian_name.push(xian[i].name)
        }
        that.setData({
          xian: xian,
          xian_name: xian_name
        })
      }
    })
  },
  PickerChangeXo(e){
    let that = this
    var xian_id = that.data.xian[e.detail.value].id
    that.setData({
      indexv: e.detail.value,
      xian_id:xian_id
    })
    that.data.indexv++
  }
})