小程序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
			})
		}
	},
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章