微信小程序：多列选择器——选择城市
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代码：
<view class='city'>城市
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
<input type='text' name='city' placeholder='天津' value="{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}" />
<image style='width:35rpx;height:35rpx; position:absolute;right:20rpx;top:105px;' src='../../assets/icons/箭头 右.png'></image>
</picker>
</view>
实现效果：
选择城市
积累一点一滴~
