微信小程序：（动态获取数据）实现三级联动

前两天用小程序做项目，需要从数据库里取数据来实现三级联动

wxml里使用组件：

    
     
      详细住址：
      
      点击选择用户详细住址
     
      
        {{multiArray[0][multiIndex[0]]}}
        
        {{multiArray[1][multiIndex[1]]}}
        
        {{multiArray[2][multiIndex[2]]}}
        
      
    
  

js里代码：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    apply_for: '',
    multiArray: [],
    multiIndex: [0, 0, 0],
    step:0
    
  },
  onLoad: function (options) {
this.getProvince()  // 页面加载后就调用函数 获取省级数据
 },

  getProvince() { // 获取省
    var vid = app.globalData.village;
    var that = this;
    app.danyuan(vid,function(data){
  
  var provinceList = data.data
  //console.log(provinceList)
  
  var provinceArr = provinceList.map((item) => { return item.dname }) // 获取数据里面的dname值，就是只用数据的名称 
  //console.log(provinceArr)
  that.setData({
    multiArray: [provinceArr, [], []], // 更新三维数组 
    provinceList,   // 省级原始数据
    provinceArr    // 省级所有的名称
  })
  var defaultCode = that.data.provinceList[0].did  // 使用第一项当作参数获取市级数据
  //console.log(defaultCode)
  if (defaultCode) {
    that.setData({
      currnetProvinceKey: defaultCode  // 保存在当前的省级key
    })
    that.getCity(defaultCode)  // 获取市级数据
  }
})
  },
  getCity(code) { // 获取市级数据
    this.setData({
      currnetProvinceKey: code  // 保存当前选择的市级code
    })
    var that = this;
    //console.log(this.data.currnetProvinceKey)
    var did = code
    //console.log(did)
    app.dong(did, function (data) {
     // console.log(data.data)
      var cityList = data.data
      var cityArr = cityList.map((item) => { return item.bname })
      //console.log(cityArr)
      that.setData({
        multiArray: [that.data.provinceArr, cityArr, []],  // 更新三维数组 
        cityList,  // 保存下市级原始数据
        cityArr  // 市级所有的名称
      })
      var defaultCode = that.data.cityList[0].bid  
      if (defaultCode) {
        that.setData({
          currnetCityKey: defaultCode  // 存下当前选择的城市key
        })
        that.getStore(defaultCode) // 获取门店数据
      }
    })
  },
  getStore(code) {
    //console.log(code)
    this.setData({
      currnetCityKey: code // 更新当前选择的市级key
    })
    var that = this;
    var bid = code;
    app.huhao(bid, function (data) {
      var storeList = data.data
      var storeArr = storeList.map((item) => { return item.nname })
      console.log(storeArr)
      that.setData({
        multiArray: [that.data.provinceArr, that.data.cityArr, storeArr],  
        storeList,  // 保存下门店原始数据
        storeArr    // 保存下门店名称，可以不保存
      })
    })
  },



  bindMultiPickerColumnChange(e) {  // 滚动选择器 触发的事件
    var column = e.detail.column  // 当前改变的列
    console.log(column)
    var data = {
      multiIndex: JSON.parse(JSON.stringify(this.data.multiIndex)),
      multiArray: JSON.parse(JSON.stringify(this.data.multiArray))
    }
    data.multiIndex[column] = e.detail.value;  // 第几列改变了就是对应multiIndex的第几个，更新它
    switch (column) { // 处理不同的逻辑
      case 0:   // 第一列更改 就是省级的更改
        var currentProvinceKey = this.data.provinceList[e.detail.value].did
        if (currentProvinceKey != this.data.currnetProvinceKey) {  // 判断当前的key是不是真正的更新了
          this.getCity(currentProvinceKey)  // 获取当前key下面的市级数据
        }

    data.multiIndex[1] = 0  // 将市默认选择第一个
    break;

  case 1:  // 市发生变化
    var currentCitykey = this.data.cityList[e.detail.value].bid
    if (currentCitykey != this.data.currnetCityKey) {  // 同样判断
      this.getStore(currentCitykey)   // 获取门店
    }
    data.multiIndex[2] = 0  // 门店默认为第一个
    break;
}
this.setData(data)  // 更新数据
  },
  bindMultiPickerChange(e) {
    this.setData({
      step: 1,  // 更新，用来选择用户选中的门店
      multiIndex: e.detail.value  // 更新下标字段
    })
  },

})

这里数据是从数据库里取得，而从数据库里取数据使用的是tp后台语言，在js里调用app.js里定义好的方法。

app.js:
例：

 danyuan(vid,jg) {
const requestTask = wx.request({
  url: 'http://localhost/watermeter/index.php/admin/village/danyuan/vid/vid',
  data: {
    vid:vid
  },
  header: {
    'content-type': 'application/json'
  },
  method: 'GET',
  success: function (res) {
    jg(res.data);

  }
})

},