这几天做小程序因为项目里要做个行业分类的二级联动，想到了小程序自带的picker插件，对照实例看了一下发现，小程序picker实例的数据来源格式跟我的项目接口返回的数据格式不太一样，而且是三级联动，所以我准备把这个实例结构改一下，封装起来，让大家直接可以拿过来用。
看一下成果展示和我的数据格式，如果数据格式和你们正在做的项目一样，那么就可以直接复制源代码使用了，如果不一样，看一下和小程序官方实例这个数据格式是不是一样。
我的项目接口返回的数据格式是每一项都有一个子项（childern）字段；
1.好了，接下来第一步，我们把小程序picker官方实例导入进来，删除没用的单选和时间地址的picker(wxml和js里无关代码都删除)，留下一个 多选择器功能的代码。
2.修改wxml，因为是二级联动，所以要把实例中的第三级{{multiArray[2][multiIndex[2]]}}给删除。
<picker class="pickerSconed" mode="multiSelector"bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
<view class="picker">
{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}
</view>
</picker>
最后wxml文件中完整的代码应该是这样。
3.修改js文件，删除后的js文件是下面这样。
Page({
data: {
multiArray: [],
multiIndex: [0, 0],
}
bindMultiPickerChange: function (e) {
},
bindMultiPickerColumnChange: function (e) {
}
})
剩下就是我们随心所欲的往里面写自己的内容了，因为是要封装组件使用，所以要先使用attached(){}这个方法，让组件调用时候就执行代码。
attached(){
this.getIndustry();
},
/**
* 组件的方法列表
*/
methods: {
// 获取行业分类checkCorp.industry
getIndustry() {
let that = this;
httpPost(xxxx接口地址xxxx, {}, res => {
if (res.code == httpCode.success) {
console.log(res.data);
let temporary = { //--------------因为接口数据返回的是从第一项开始的，这里加一个请选择选项放入数据的开头
label:"请选择",
value:"0",
children:[{label:'',value:'0'}]
}
let firstList = res.data; //---------------------将一级分类数组放入新的变量里便于操作
firstList.unshift(temporary);
console.log(firstList);
let industryName = firstList.map(m => {
return m.label //------------------------获取一级下拉列表的名称
});
that.setData({
multiArray: [industryName, []], //----------- 将一级列表的名称存入二维数组的第一项
firstList, // ------------一级的完整数据 先存着后面有用
industryName //---------------一级的名称 先存着后面有用
});
let industryOneId = firstList[0]['value']; // 一级菜单默认的value
if (industryOneId) {
that.searchClassInfo(industryOneId); //如果存在，去掉取相应数组下的list
}
}
})
},
上面是第一部分代码，我尽量都采用这种代码附注释的方式逐行讲解。httpPost是我封装的一个post请求，最下面会贴出来。
下面代码接this.searchClassInfo()这个方法，把一级的value拿到，其实这个value就是id。searchClassInfo()方法的主要步骤就是：
- 将一级下拉选中的value取下来
2.根据存下来的value去firstList里找到相同value的那一项
3.将相同项下的children字段存下来，并且遍历出其下的label字段 放入二维数组的第二位中。
searchClassInfo(value) {
let that = this;
if (value) {
that.setData({
industryOneId: value //这个是一级列表中用户选中的value
});
that.data.firstList.map(m => { //firstList是一级分类的数组，上方代码里有
if (m.value == value) { //通过比对查出value对应的这一列
that.setData({
secondList: m.children //用户选中的一级分类中的children就是第二列的列表
})
}
});
// console.log(that.data.secondList);
let industryTwoName = that.data.secondList.map(m => {
return m.label //再遍历secondList把所有的label取出来放入industryTwoName 中用于二级列表的展示
});
// console.log(industryTwoName);
let industryName = that.data.industryName;
that.setData({
multiArray: [industryName, industryTwoName], //这就是一个完整的二级联动展示了
industryTwoName,
})
}
},
然后我们要他的滚动状态进行监听 ,小程序案例中给了这个方法：bindcolumnchange="bindMultiPickerColumnChange"，我们直接拿他接着写
bindMultiPickerColumnChange: function (e) {
let that = this;
console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
var data = {
multiArray: that.data.multiArray,
multiIndex: that.data.multiIndex
};
data.multiIndex[e.detail.column] = e.detail.value; //从这以上的代码是案例自带的没有删除的。
/************************************************************/
let industryOneId_session = that.data.industryOneId; // 先将滚动前的一级菜单id存下来，便于之后做对比
switch (e.detail.column) {
case 0:
let firstList = that.data.firstList;
var firstId = firstList[e.detail.value]['value'];
if (industryOneId_session != firstId) { //每次滚动的时候都去和上一个做一次对比
that.searchClassInfo(firstId); // 只要不一样，就去执行上面searchClassInfo()这个方法
}
data.multiIndex[1] = 0;
break;
}
}
最后我们需要确定他的改变事件，bindchange="bindMultiPickerChange";
bindMultiPickerChange: function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value);
var secondList = this.data.secondList;
var select_key = e.detail.value[1]; //去二维数组中第二项的下标取出来，也就是二级下拉菜单的下标值
this.setData({
industryTwoId: secondList[select_key]['value'] // 拿到下标值对应的value值就是我们要用的id
})
this.setData({
multiIndex: e.detail.value
});
// 通过triggerEvent绑定的myEvent方法，把一级下拉的id和二级下拉的id拿出来
this.triggerEvent('myEvent', { industryOneId: this.data.industryOneId, industryTwoId: this.data.industryTwoId})
},
这样的话，组件就封装好了，别的页面调用的话也很简单
然后。。
<industry-class class="pickerSconed" bind:myEvent="getData"></industry-class>
bind:myEvent绑定的getData()方法可以取出组件中传过来的一级id和二级id；
getData(e){
let data = e.detail;
this.setData({
industryOneId: data.industryOneId,
industryTwoId: data.industryTwoId
});
console.log(this.data.industryOneId);
console.log(this.data.industryTwoId);
},
最后附上封装的post方法代码。
// post请求
function httpPost(url, data, cb) {
wx.request({
url: 'xxx Ip地址 xxx' + url,
data: data,
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded',
},
success: function (res) {
return typeof cb == "function" && cb(res.data)
},
fail: function () {
return typeof cb == "function" && cb(false)
}
})
}
