小程序API提供的滚动选择器是没有级联关系的,请求接口返回的数据是tree类型的
{
"data": [{
"flid": "13541",
"name": "阿斯蒂",
"children": [{
"flid": "3c24dcad-2356-4aed-9db3-dfe169e0048c",
"name": "123",
"children": null
}, {
"flid": "81321b",
"name": "阿斯蒂芬",
"children": null
}]
}, {
"flid": "126354asdf,
"name": "阿斯蒂",
"children": [{
"flid": "73a679c2",
"name": "2333",
"children": null
}]
}]
}
类似这样....
页面布局
下面是css
.model {
position: absolute;
width: 100%;
height: 100%;
z-index: 999;
}
下面是js
data: {
resData: [],
multiArray: [],
multiIndex: [0, 0],
select: '',
selectId: ''
},
bindMultiPickerChange: function(e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
if (this.data.resData[e.detail.value[0]].children) {
this.setData({
multiIndex: e.detail.value,
select: this.data.multiArray[0][e.detail.value[0]].name+' / '+this.data.multiArray[1][e.detail.value[1]].name,
selectId: this.data.resData[e.detail.value[0]].flid + ',' + this.data.resData[e.detail.value[1]].flid,
})
console.log(this.data.selectId) //这里存放id传送给后台
} else {
wx.showToast({
title: '请选择完整分类',
icon: 'none',
duration: 2000
})
}
},
bindcolumnchange: function(e) {
//修改第一列 == 0
if (e.detail.column == 0) {
//如果子集有数据
if (this.data.resData[e.detail.value].children) {
var child = this.data.resData[e.detail.value].children;
var arrs = []
child.forEach(function(item) {
arrs.push({
name: item.name,
id: item.flid
})
})
var kk = this.data.multiArray
kk[1] = arrs
this.setData({
multiArray: kk
})
} else {
//如果子集没有数据
var arrs = []
arrs.push({
name: '',
id: ''
})
var kk = this.data.multiArray
kk[1] = arrs
this.setData({
multiArray: kk
})
}
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
var that = this;
app.post('******', {}, function(response) {
console.log(response)
that.setData({
resData: response.data
})
var arr = [
[],
[]
];
response.data.forEach(function(item) {
arr[0].push({
name: item.name,
id: item.flid
})
})
if (response.data[0].children) {
response.data[0].children.forEach(function(item) {
arr[1].push({
name: item.name,
id: item.flid
})
})
}
console.log(arr)
that.setData({
multiArray: arr
})
})
},
over