小程序picker实现省市二级联动

先讲一下需求

服务端提供了省、市两个接口，市的接口通过省的pid进行关联，所以小程序直接提供的地区选择picker不适用（或者有我不知道的方法，话不能说满哈哈）。

方案是用小程序picker组件提供的多项选择mode，自己写了一个二级联动，或不多说上代码：

<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
　　<view class="picker">
      当前选择：{{multiArray[0][multiIndex[0]]}} > {{multiArray[1][multiIndex[1]]}}
    </view>
</picker>

js文件

Page({

  data: {

    multiIndex:[]

  },

  bindPickerChange: function (e) {

    console.log('picker发送选择改变，携带值为', e.detail.value)

    this.setData({

      index: e.detail.value

    })

  },

  searchClassInfo(xiaoqu_id) {

    var that = this;

    if (xiaoqu_id) {

      this.setData({

        pid: xiaoqu_id

      }, () => {

        wx.request({

          url: ''https://www.XXX.com/XXX/XXX',',

          method: "POST",

          header: {

            'content-type': 'application/x-www-form-urlencoded',

            'Accept': 'application/json'

          },

          data: {

            "pid": that.data.pid

          },

          success: function (res) {

            console.log(res);

            var classList = res.data.data;

            var classArr = classList.map(item => {

              return item.city;

            })

            var xiaoquArr = that.data.xiaoquArr;

            that.setData({

              multiArray: [xiaoquArr, classArr],

              classArr,

              classList

            })

          }

        })

      })

    }

  },

  bindMultiPickerColumnChange: function (e) {

    //e.detail.column 改变的数组下标列, e.detail.value 改变对应列的值

    console.log(e);

    console.log('修改的列为', e.detail.column, '，值为', e.detail.value);

    var data = {

      multiArray: this.data.multiArray,

      multiIndex: this.data.multiIndex

    };

    data.multiIndex[e.detail.column] = e.detail.value;

    var pid_session = this.data.pid;　　　　// 保持之前的校区id 与新选择的id 做对比，如果改变则重新请求数据

    switch (e.detail.column) {

      case 0:

        var xiaoquList = this.data.xiaoquList;

        var pid = xiaoquList[e.detail.value]['pid'];

        if (pid_session != pid) {　　　　// 与之前保持的校区id做对比，如果不一致则重新请求并赋新值

          this.searchClassInfo(pid);

        }

        data.multiIndex[1] = 0;

        break;

    }

    this.setData(data);

  },

  bindMultiPickerChange: function (e) {

    console.log('picker发送选择改变，携带值为', e.detail.value)

    var class_key = 0;

    var classList = this.data.classList;

    var select_key = e.detail.value[1];

    var real_key = select_key - 1;

    if (real_key < class_key) {

      this.setData({

        cid: 0

      })

    } else {

      this.setData({

        cid: classList[real_key]['cid']　　　　　　// class_id 代表着选择的班级对应的 班级id

      })

    }

    this.setData({

      multiIndex: e.detail.value

    })

  },

  onLoad:function(){

    var that = this;

    wx.request({

      url: 'https://www.XXX.com/XXX/XXX',

      data: {},

      method:"POST",

      header: {

        'content-type': 'application/json' // 默认值

      },

      success:function(res) {

        console.log(res);

        var xiaoquList = res.data.data;

        var xiaoquArr = xiaoquList.map(item => {　　　　// 此方法将校区名称区分到一个新数组中

          return item.province;

        });

        that.setData({

          multiArray: [xiaoquArr, []],

          xiaoquList,

          xiaoquArr

        })

        var default_xiaoqu_id = xiaoquList[0]['pid'];　　　　//获取默认的校区对应的 teach_area_id

        if (default_xiaoqu_id) {

          that.searchClassInfo(default_xiaoqu_id)　　　　　　// 如果存在调用获取对应的班级数据

        }

      }

    })

  }

})

由于借鉴了【小程序 picker 多列选择器 数据动态获取】，所以请无视那些命名奇怪的变量。
原文链接：https://www.cnblogs.com/inzaghihao/p/7844844.html

踩的坑：

由于原文没有贴js文件的data部分，于是天真的我就进坑了

如果没有预先在data里定义multiIndex，则在打开滑动框并鼠标移入后会出现以下报错

QQ截图20180815110411.png

错误解释：

在第一次打开时，multiIndex还未被定义，浏览器无法识别其为数组，所以wxml中的picker无法获取第一次的index