这个图分解成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事件进入死循环 `
.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; }`
