小程序齐层看板 scroll-view 解决抖动

 

        

 

 

 

　　  这个图分解成4块 上左：楼层    上右：基础数据  下左：固定文字  下右：楼栋

　　  楼层可上下滑动

　　  楼栋可左右滑动

         基础信息可上下左右滑动

 

         楼层scroll-view 与基础信息scroll-view 上下滑动关联

     　楼栋scroll-view 与基础信息scroll-view 左右滑动关联

　　 当同时滑动  楼层与基础信息 并且滑动方向相反就会导致scroll事件的监听进入死循环导致页面抖动

　　为了解决这个问题就设想同时只能滑动一个scroll-view

       就写了三个遮罩层在三个scroll-view上

       当 一个scroll-view 触发了 touchstart 事件其他两个scroll-view 上面的遮罩层显示

 

 

 　  当 scroll-view 触发了 touchend 事件三个scroll-view 上面的遮罩层隐藏

       这样就解决了同时触发两个@scroll事件进入死循环

<template>
	<view :style="'height:' + scrollViewHeight + ';'" id="scroll-v3" class="projectProgress">
		<view v-if="isFloorMask" class="floor-mask"></view>
		<view v-if="isTableMask" :style="'height:' + tableHeight + ';'" class="table-mask"></view>
		<view v-if="isBuildingMask" class="building-mask"></view>
		<!-- 楼层和项目构件进度汇总 -->
		<view class="floorsTable">
			<scroll-view @touchend="hideMask" @touchstart="floorTouchstart" @scroll="floorScrollHandler" scroll-y="true"
				:scroll-top="floorScrollTop" :scroll-anchoring="true" style="height: 100%; width: 174rpx">
				<view class="floors">
					<view class="floorItem" v-for="floor in floorsList" :key="floor">{{ floor }}层</view>
				</view>
			</scroll-view>
			<scroll-view @touchend="hideMask" @touchstart="tableTouchstart" @scroll="tableScrollHandler" scroll-x="true" scroll-y="true"
				:scroll-top="tableScrollTop" :scroll-left="tableScrollLeft" :scroll-anchoring="true"
				style="height: 100%; width: calc(100vw - 174rpx)">
				<view class="allComponents">
					<view class="componentTable">
						<componentTable v-for="(buildingItem, index) in boardsInfo" :key="index"
							:boardsInfo="buildingItem" :floorsList="floorsList">
						</componentTable>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 楼栋和构件类型 -->
		<view class="projectInfo">
			<view class="title"> 项目详情 </view>
			<scroll-view @touchend="hideMask" @touchstart="buildTouchstart" @scroll="buildingScrollHandler" scroll-x="true"
				:scroll-left="buildingScrollLeft" :scroll-anchoring="true"
				style="width: calc(100vw - 170rpx); height: 196rpx">
				<view class="buildingAndType">
					<BuildingAndType v-for="(buildingItem, index) in boardsInfo" :key="index"
						:building="buildingItem.buildingName" :typeList="buildingItem.typeList">
					</BuildingAndType>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import debounce from "@/utils/deBounce.js";
	import BuildingAndType from "./BuildingAndType.vue";
	import componentTable from "./componentTable.vue";
	import {
		getBillBoardsList
	} from "@/api/project.js";
	export default {
		name: "ProjectProgress",
		components: {
			BuildingAndType,
			componentTable,
		},
		props: {
			projectId: {
				type: Number,
			},
		},
		created() {
			this.getBillBoardsList();
		},
		data() {
			return {
				tableHeight:'calc(100vh -20px - 44px - 44px - 196rpx)',
				isFloorMask: false,
				isBuildingMask: false,
				isTableMask: false,
				scrollViewHeight: "80vh",
				floorScrollTop: 0,
				tableScrollTop: 0,
				tableScrollLeft: 0,
				buildingScrollLeft: 0,

				floorScrollFunc: false,
				tableScrollFunc: false,
				buildingScrollFunc: false,

				floorTimer: null,
				tableTimer: null,
				buildingTimer: null,

				boardsInfo: [],
				floorsList: [],
			};
		},
		mounted() {
			uni.getSystemInfo({
				success: (resu) => {
					this.tableHeight = `calc(100vh - ${resu.statusBarHeight}px - 44px - 44px - 196rpx)`
					const query = uni.createSelectorQuery();
					query.select("#scroll-v3").boundingClientRect();
					query.exec((res) => {
						this.scrollViewHeight =
							`calc(${resu.windowHeight}px - ${resu.statusBarHeight}px - 44px - 44px)`;
					});
				},
				fail: (res) => {},
			});
		},
		methods: {
			hideMask() {
				this.isFloorMask = false
				this.isBuildingMask = false
				this.isTableMask = false
			},
			initScrollTop(){
				this.boardsInfo=[]
				this.floorsList=[]
				this.floorScrollTop=0
				this.tableScrollTop=0
				this.tableScrollLeft=0
			},
			// 获取项目下看板的信息
			getBillBoardsList() {
				this.initScrollTop()
				uni.showLoading({
					title:"加载中"
				})
				getBillBoardsList(this.projectId).then((responseData) => {
					this.boardsInfo = responseData?.data?.data?.buildingUnitVOList;
					uni.hideLoading() 
					if (this.boardsInfo) {
						this.floorsListHandler();
					}
				}).catch(()=>{
					uni.hideLoading()
				})
			},
			// 楼层数据汇总处理
			floorsListHandler() {
				this.floorsList = [];
				const floorsList = [];
				this.boardsInfo.forEach((boardInfo) => {
					Object.keys(boardInfo.floorMap).forEach((floor) => {
						if (floorsList.indexOf(floor) === -1) {
							floorsList.push(floor);
						}
					});
				});
				setTimeout(() => {
					this.floorScrollTop = 68 * this.floorsList.length + Math.random();
					this.tableScrollTop = this.floorScrollTop;
				}, 100);
				this.floorsList = floorsList;
			},
			floorTouchstart() {
				this.floorScrollFunc = true;
				 
				this.isBuildingMask = true
				this.isTableMask = true
			},
			tableTouchstart() {
				this.tableScrollFunc = true;
				
				this.isFloorMask = true
				this.isBuildingMask = true
			},
			buildTouchstart() {
				this.buildingScrollFunc = true;
				
				this.isFloorMask = true
				this.isTableMask = true
			},
			floorScrollHandler(e) {
				if (this.floorTimer) clearTimeout(this.floorTimer);
				if (!this.floorScrollFunc) return;
				this.floorTimer = setTimeout(() => {
					this.floorScrollFunc = false;
				}, 200);
				const {
					scrollTop
				} = e.detail;
				this.tableScrollTop = scrollTop;
			},
			tableScrollHandler(e) {
				if (this.tableTimer) clearTimeout(this.tableTimer);
				if (!this.tableScrollFunc) return;
				this.tableTimer = setTimeout(() => {
					this.tableScrollFunc = false;
				}, 200);
				const {
					scrollTop,
					scrollLeft
				} = e.detail;
				this.floorScrollTop = scrollTop;
				this.buildingScrollLeft = scrollLeft;
			},
			buildingScrollHandler(e) {
				if (this.buildingTimer) clearTimeout(this.buildingTimer);
				if (!this.buildingScrollFunc) return;
				this.buildingTimer = setTimeout(() => {
					this.buildingScrollFunc = false;
				}, 200);
				const {
					scrollLeft
				} = e.detail;
				this.tableScrollLeft = scrollLeft;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.projectProgress {
		height: 100%;
		width: 100vw;
		background-color: #ffffff;
		border-top: 2rpx solid #dfdfdf;
		box-sizing: border-box;

		.floorsTable {
			height: calc(100% - 196rpx);
			background-color: #ffffff;
			display: flex;
			box-sizing: border-box;

			.floors {
				width: 174rpx;
				min-height: 100%;
				color: #333333;
				font-size: 28rpx;
				display: flex;
				flex-direction: column-reverse;

				.floorItem {
					box-sizing: border-box;
					height: 68rpx;
					width: 100%;
					text-align: center;
					border-top: 2rpx solid #dfdfdf;
					border-right: 2rpx solid #dfdfdf;
					border-left: 2rpx solid #dfdfdf;
					padding-top: 10rpx;
				}
			}

			.allComponents {
				display: flex;
				flex-direction: row;
				min-width: calc(100vw - 174rpx);
				min-height: 100%;
				flex-direction: column-reverse;

				.componentTable {
					display: flex;
				}
			}
		}

		.projectInfo {
			height: 196rpx;
			border: 2rpx solid #dfdfdf;
			display: flex;
			box-sizing: border-box;

			.title {
				height: 196rpx;
				line-height: 170rpx;
				background-color: #f8f8f8;
				color: #333333;
				font-size: 28rpx;
				writing-mode: vertical-lr;
				text-align: center;
				z-index: 97;
				letter-spacing: 8rpx;
				border-right: 2rpx solid #dfdfdf;
				box-sizing: border-box;
			}

			.buildingAndType {
				display: flex;
			}
		}
	}

	.floor-mask {
		position: fixed;
		width: 174rpx;
		height: 100vh;
		left: 0;
		bottom: 0;
		top: 220rpx;
		background-color: transparent;
		z-index: 999999;
	}

	.building-mask {
		position: fixed;
		width: 100vw;
		height: 196rpx;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: transparent;
		z-index: 999999;
	}

	.table-mask {
		position: fixed;
		width: calc(100vw-174rpx);
		height: calc(100vh-206px);
		left: 174rpx;
		right: 0;
		bottom: 196rpx;
		background-color:transparent;
		z-index: 999999;
	}
</style>