小程序picker实现二级联动

先上效果图:在这里插入图片描述
结构这个样子的:

<view class="edit_group_picker">
	  <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{region}}">
		<view class="addr_picker_box">
			<view>
				<text>{{region[0][multiIndex[0]]}}</text><text>{{region[1][multiIndex[1]]}}</text>
			</view>
			<image class="next" src="/dist/image/next.png" />
		</view>
	</picker>
</view>

先获取后台数据
我们用的后台数据结构如下:
在这里插入图片描述
在这里插入图片描述

//data

	data: {
		schoolsArr: [],
		school: [],
		floor: [],
		region: [],
		schoolId: '',//学校id
		schoolTungId: '',//楼栋id
		multiIndex: [0,0],
	},
onLoad: function (options) {
		var school = [];
		var floor = [];
		for (var i = 0; i < resArr.length; i++) {
			school.push(resArr[i].name)
		}
		var sid = app.globalData.sid;//需求需要定位到当前选择的学校。。。这个是当前学校的id
		for (let k = 0; k < resArr.length; k++) {
			var res = resArr[k];//resArr是后台取出来的数据resArr==schoolsArr 
			if(res.id == sid){
				that.setData({
					schoolId: resArr[k].id,//当前定位的学校id==sid
					"multiIndex[0]": k,
				})
				if(resArr[k].children.length>0){
					for (let p = 0; p < res.children.length; p++) {
						const ele = res.children[p];
						floor.push(resArr[k].children[p].name)
					}
					that.setData({
						schoolTungId: resArr[k].children[0].id,//楼栋id
					})
				}
			}
		}
		
		that.setData({
			"region[1]":floor,
			floor:floor
		})
},
	bindMultiPickerColumnChange: function (e) {
		//选择
		var that = this;
		var schoolsArr = that.data.schoolsArr;//resArr是后台取出来的数据resArr==schoolsArr 
		// var school = [];
		var floor = [];
		if (e.detail.column == 0) {
			that.setData({
		        "region[1]":[]
		      })
			console.log(e.detail.value);
			for (let j = 0; j < schoolsArr[e.detail.value].children.length; j++) {
				floor.push(schoolsArr[e.detail.value].children[j].name)
			}
			that.setData({
				"region[1]": floor,
				multiIndex: [e.detail.value,0],
				schoolId: schoolsArr[e.detail.value].id
			})
		} else {
			that.setData({
				"multiIndex[1]": e.detail.value,
				schoolTungId: schoolsArr[that.data.multiIndex[0]].children[e.detail.value].id
			})
		}
	},
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章