<view class="weui-cell__bd">
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" range-key="name" range="{{brands}}">
<view class="weui-select weui-select_in-select-after">
{{bigname}}-{{smallname}}</view>
</picker>
</view>
类别选择,雷同于省市选择,但是有不同的地方是,有些大类下面没有小类。这就是需要注意的难点。
js代码,首选定义变量。
"bigs": [], //大类类别数组
"smalls":[], //小类类别数组
"bigid":0, //大类类别编号
"smallid":0, //小类类别编号
"bigname":'', //大类类别名称
"smallname":'', //小类类别名称
定义完了变量之后,就是在onload里面请求接口,返回数据。
app.apphttp(wx.request)({
url: app.globalData.url + 'api/category/getcats',
method: 'POST',
header: {'content-type': 'application/x-www-form-urlencoded'},
data: {},
}).then(function (res2) {
const bigs = [[], []];
const smalls = [[], []];
that.setData({
tempdata: res2.data.data
});
for (let i = 0; i < res2.data.data.length; i++) {
var obj = new Object;
obj.itemid = res2.data.data[i].itemid;
obj.name = res2.data.data[i].name;
bigs[0].push(obj);
}
for (let i = 0; i < res2.data.data[0].cats.length; i++) {
var obj = new Object;
obj.itemid = res2.data.data[0].smalls[i].itemid;
obj.name = res2.data.data[0].smalls[i].name;
bigs[1].push(obj);
}
that.setData({
'bigs': bigs,
'smalls': smalls,
'bigname': '',//res2.data.data[0].name,
'smallname': res2.data.data[0].smalls.length>0?res2.data.data[0].smalls[0].name:'' //小类的名称默认是大类的第一个子类名称
});
}).catch(function (error) {
console.log(error);
});
下面是最关键的,选择大类之后,再选择大类下面的一个小类。
bindMultiPickerChange: function (e) {
//console.log(this.data.provinceid);//获取了省份编号
//console.log(this.data.cityid);//获取了城市编号
},
bindMultiPickerColumnChange: function (e) {
var that = this;
switch (e.detail.column) {
case 0:
//当选择了大类的时候
that.setData({
"bigs[1]": that.data.tempdata[e.detail.value].smalls,
"bigname": that.data.tempdata[e.detail.value].name,
"bigid": that.data.tempdata[e.detail.value].itemid,
"smallname": that.data.tempdata[e.detail.value].smalls.length > 0 ? that.data.tempdata[e.detail.value].cats[0].name:'',
"smallid": that.data.tempdata[e.detail.value].smalls.length > 0 ? that.data.tempdata[e.detail.value].cats[0].itemid:0,
});
break;
case 1:
//当选择了小类以后
that.setData({
"smallname": that.data.brands[1][e.detail.value].name,
"smallid": that.data.brands[1][e.detail.value].itemid
});
}
// console.log(that.data.brandid); console.log('||');
// console.log(that.data.catid);
},