zhangqi
/
kuailelunwen_new_houtai
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

侧边导航对应高亮修改

zq-slider-menu
zq 3 weeks ago
parent
bd7f63ac92
commit
5a77a8c7c2
1 changed files with 79 additions and 102 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 181
      src/components/SetLeftMenu.vue

181
src/components/SetLeftMenu.vue
View File

@ -45,22 +45,7 @@ export default {
scrollLock: false,
}
},
mounted() {
this.activeFloor = this.menuList[this.curIndex]?.list?.[0]?.desc;
this.$nextTick(() => {
// 更可靠的获取滚动容器方式
this.scrollContainer = document.querySelector('.main-content') ||
document.getElementById('main-content') ||
window;
console.log(this.scrollContainer,'this.scrollContainer---');
if (this.scrollContainer) {
this.scrollContainer.addEventListener('scroll', this.handleScroll);
this.calculateFloorOffsets();
} else {
console.error('未找到滚动容器');
}
});
},
watch: {
'$route'(to, from) {
console.log(to, from);
@ -71,11 +56,27 @@ export default {
});
}
},
beforeDestroy() {
mounted() {
this.activeFloor = this.menuList[this.curIndex]?.list?.[0]?.desc;
this.$nextTick(() => {
// 更可靠的获取滚动容器方式
this.scrollContainer = document.querySelector('.main-content') ||
document.getElementById('main-content') ||
window;
if (this.scrollContainer) {
this.scrollContainer.removeEventListener('scroll', this.handleScroll);
this.scrollContainer.addEventListener('scroll', this.handleScroll);
this.calculateFloorOffsets();
} else {
console.error('未找到滚动容器');
}
},
});
},
beforeDestroy() {
if (this.scrollContainer) {
this.scrollContainer.removeEventListener('scroll', this.handleScroll);
}
},
created() {
},
computed: {
@ -86,68 +87,44 @@ export default {
var randomNumber = Math.random();
return randomNumber
},
// calculateFloorOffsets() {
// this.menuList.forEach(item => {
// item.list.forEach(every => {
// const el = document.getElementById(every.desc);
// if (el) {
// every.offsetTop = el.offsetTop;
// }
// })
// });
// },
// handleScroll() {
// if (this.scrollLock) return
// const scrollContainer = this.$parent.$refs.scrollContainer;
// const scrollHeight = scrollContainer.scrollTop;
// let activeFloor = this.menuList[this.curIndex]['list'][0]['desc'];
// this.menuList[this.curIndex]['list'].forEach(item => {
// if (scrollHeight + 72 >= item.offsetTop) {
// activeFloor = item.desc; // 更新当前激活的楼层ID
// } else {
// return false; // 一旦找到第一个小于当前滚动位置的楼层，停止循环
// }
// });
// this.activeFloor = activeFloor; // 更新数据以触发视图更新
// },
calculateFloorOffsets() {
this.menuList.forEach(item => {
item.list?.forEach(every => {
const el = document.getElementById(every.desc);
if (el) {
// 获取元素相对于视口顶部的距离
every.offsetTop = el.getBoundingClientRect().top + window.pageYOffset;
}
});
});
},
handleScroll() {
if (this.scrollLock || !this.menuList[this.curIndex]?.list) return;
const scrollPosition = this.getScrollPosition();
let activeFloor = null;
// 从下往上查找当前可见区域对应的楼层
for (let i = this.menuList[this.curIndex].list.length - 1; i >= 0; i--) {
const item = this.menuList[this.curIndex].list[i];
if (scrollPosition + 100 >= (item.offsetTop || 0)) { // 100是提前量
activeFloor = item.desc;
break;
this.menuList.forEach(item => {
item.list?.forEach(every => {
const el = document.getElementById(every.desc);
if (el) {
// 获取元素相对于视口顶部的距离
every.offsetTop = el.getBoundingClientRect().top + window.pageYOffset;
}
});
});
},
handleScroll() {
if (this.scrollLock || !this.menuList[this.curIndex]?.list) return;
const scrollPosition = this.getScrollPosition();
let activeFloor = null;
// 从下往上查找当前可见区域对应的楼层
for (let i = this.menuList[this.curIndex].list.length - 1; i >= 0; i--) {
const item = this.menuList[this.curIndex].list[i];
if (scrollPosition + 100 >= (item.offsetTop || 0)) { // 100是提前量
activeFloor = item.desc;
break;
}
if (activeFloor && this.activeFloor !== activeFloor) {
this.activeFloor = activeFloor;
}
},
getScrollPosition() {
if (this.scrollContainer === window) {
return window.pageYOffset || document.documentElement.scrollTop;
}
return this.scrollContainer.scrollTop;
},
}
if (activeFloor && this.activeFloor !== activeFloor) {
this.activeFloor = activeFloor;
}
},
getScrollPosition() {
if (this.scrollContainer === window) {
return window.pageYOffset || document.documentElement.scrollTop;
}
return this.scrollContainer.scrollTop;
},
// setActiveCur(dom, item) {
// if (this.$route.path != item.path) {
// this.$router.push(item.path)
@ -189,31 +166,31 @@ export default {
console.log(type);
},
setActiveCur(dom, item) {
if (item.path && this.$route.path !== item.path) {
this.$router.push(item.path);
store.commit('SET_PAGETITLE', item.name);
}
this.scrollLock = true;
this.activeFloor = dom;
this.$nextTick(() => {
this.setHighActive(dom);
setTimeout(() => {
this.scrollLock = false;
}, 1000);
});
},
if (this.$route.path !== item.path) {
this.$router.push(item.path);
store.commit('SET_PAGETITLE', item.name);
}
this.scrollLock = true;
this.activeFloor = dom;
this.$nextTick(() => {
this.setHighActive(dom);
setTimeout(() => {
this.scrollLock = false;
}, 1000);
});
},
setHighActive(dom) {
const ele = document.getElementById(dom);
if (ele) {
ele.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
}
setHighActive(dom) {
const ele = document.getElementById(dom);
if (ele) {
ele.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
}
}
}
</script>

Write Preview
Loading…
Cancel
Save