微信小程序picker滚动选择器,级联问题

小程序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
		}]
	}]
}

类似这样....

页面布局


                
                
                
            

是为了遮罩 zanUI选中 和 picker不弹出的问题

下面是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

你可能感兴趣的:(微信小程序,小程序picker级联)