微信小程序:多列选择器——选择城市

js代码:

data: {

    multiIndex: [0, 0],

    multiArray: [[],[]],

  },

/**

* 多列选择器:点击确认按钮后要出现的效果

*/

  bindMultiPickerChange: function (e) {

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

    this.setData({

      multiIndex: e.detail.value

    })

    console.log('1为:', this.data.multiArray[0][e.detail.value[0]])

    console.log('2为:', this.data.multiArray[1][e.detail.value[1]])

  },

/**

* 多列选择器:变换行列时出现的效果

*/

  bindMultiPickerColumnChange: function (e) {

    var that = this;

    var data = {

      multiArray: this.data.multiArray,

      multiIndex: this.data.multiIndex

    };

    wx.request({

      method: 'get',

      url: 'http://',

      complete: function (res) {

        if (res.data.code == 0) {

          console.log(res.data);

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


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

          switch (e.detail.column) {

            case 0:

              console.log(e.detail.value);

              console.log(res.data.data[e.detail.value].citys)

              // 给that.data.multiArray[1]赋空值,因为我之前都是直接push进去,所以要清空才能放新的

              that.setData({

                ['multiArray[' + 1 + ']']: []

              })

              for (var i = 0; i < res.data.data[e.detail.value].citys.length;i++){

                that.data.multiArray[1].push(res.data.data[e.detail.value].citys[i].name);

              }

              that.setData({

                ['multiArray[' + 1 + ']']: that.data.multiArray[1]

              })

              break;

            case 1:

              console.log("点击第二列");

              break;

          }

        }

      }

    })

  },


wxml代码:


城市

 

   

   

 


实现效果:


微信小程序:多列选择器——选择城市_第1张图片
选择城市


积累一点一滴~ 

你可能感兴趣的:(微信小程序:多列选择器——选择城市)