权限页面优化左右联动问题

This commit is contained in:
2025-07-01 11:38:26 +08:00
parent 7b1a084b5a
commit 98203617ea

View File

@@ -53,7 +53,7 @@
arr: [], arr: [],
scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度 scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
timer: null, // 定时器 timer: null, // 定时器
isTabClickOver:true
} }
}, },
onLoad() { onLoad() {
@@ -92,6 +92,7 @@
await this.getMenuItemTop(); await this.getMenuItemTop();
} }
if (index == this.current) return; if (index == this.current) return;
this.isTabClickOver = false;
this.scrollRightTop = this.oldScrollTop; this.scrollRightTop = this.oldScrollTop;
this.$nextTick(function() { this.$nextTick(function() {
this.scrollRightTop = this.arr[index]; this.scrollRightTop = this.arr[index];
@@ -136,6 +137,9 @@
}, },
// 设置左边菜单的滚动状态 // 设置左边菜单的滚动状态
async leftMenuStatus(index) { async leftMenuStatus(index) {
if (!this.isTabClickOver) {
return;
}
this.current = index; this.current = index;
// 如果为0意味着尚未初始化 // 如果为0意味着尚未初始化
if (this.menuHeight == 0 || this.menuItemHeight == 0) { if (this.menuHeight == 0 || this.menuItemHeight == 0) {
@@ -175,6 +179,10 @@
if (!this.menuHeight) { if (!this.menuHeight) {
await this.getElRect('menu-scroll-view', 'menuHeight'); await this.getElRect('menu-scroll-view', 'menuHeight');
} }
if (e.detail.scrollTop == 0) {
this.isTabClickOver = true;
// return swichMenu(0)
}
setTimeout(() => { // 节流 setTimeout(() => { // 节流
this.timer = null; this.timer = null;
// scrollHeight为右边菜单垂直中点位置 // scrollHeight为右边菜单垂直中点位置
@@ -184,7 +192,11 @@
let height2 = this.arr[i + 1]; let height2 = this.arr[i + 1];
// 如果不存在height2意味着数据循环已经到了最后一个设置左边菜单为最后一项即可 // 如果不存在height2意味着数据循环已经到了最后一个设置左边菜单为最后一项即可
if (!height2 || scrollHeight >= height1 && scrollHeight < height2) { if (!height2 || scrollHeight >= height1 && scrollHeight < height2) {
this.leftMenuStatus(i); if(this.isTabClickOver){
this.leftMenuStatus(i);
}else{
this.isTabClickOver = true;
}
return; return;
} }
} }
@@ -265,6 +277,7 @@
.u-tab-view { .u-tab-view {
height: 100%; height: 100%;
background-color: #f6f6f6;
} }
.right-box { .right-box {