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

类似这样....

页面布局

<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindcolumnchange" range-key="name" value="{{multiIndex}}" range="{{multiArray}}">
                <view class='model'></view>
                <zan-field placeholder="选择属性类别" value="{{select}}">
                </zan-field>
            </picker>

<view class='model'></view>是为了遮罩 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

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值