hookehuyr

perf(StudyCoursePage): 优化滚动和标签页切换的性能

引入防抖函数减少滚动事件触发频率,优化handleScroll函数的逻辑,增加缓冲区域判断。同时,移除handleTabChange函数中的setTimeout,立即更新activeTab的值,提升用户体验。
......@@ -217,8 +217,19 @@ onMounted(async () => {
}, 500);
});
// 防抖函数
const debounce = (fn, delay) => {
let timer = null;
return function (...args) {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args);
}, delay);
};
};
// 修改handleScroll函数
const handleScroll = () => {
const handleScroll = debounce(() => {
const detailElement = document.getElementById('detail');
const catalogElement = document.getElementById('catalog');
const interactionElement = document.getElementById('interaction');
......@@ -229,17 +240,31 @@ const handleScroll = () => {
isTabFixed.value = currentScrollY >= tabOriginalTop.value;
const scrollTop = window.scrollY;
const catalogOffset = catalogElement.offsetTop - (isTabFixed.value ? tabElement.offsetHeight : 0);
const interactionOffset = interactionElement.offsetTop - (isTabFixed.value ? tabElement.offsetHeight : 0);
const tabHeight = tabElement.offsetHeight;
const buffer = 50; // 缓冲区域
// 计算每个区域的位置,考虑固定标签页的高度
const detailTop = detailElement.offsetTop - tabHeight - buffer;
const catalogTop = catalogElement.offsetTop - tabHeight - buffer;
const interactionTop = interactionElement.offsetTop - tabHeight - buffer;
if (scrollTop >= interactionOffset) {
// 获取页面总高度和视口高度
const scrollHeight = document.documentElement.scrollHeight;
const clientHeight = document.documentElement.clientHeight;
const isAtBottom = scrollTop + clientHeight >= scrollHeight - buffer;
// 判断当前滚动位置所在区域
if (scrollTop <= detailTop) {
activeTab.value = 'detail';
} else if (isAtBottom || scrollTop >= interactionTop) {
activeTab.value = 'interaction';
} else if (scrollTop >= catalogOffset) {
} else if (scrollTop >= catalogTop && scrollTop < interactionTop) {
activeTab.value = 'catalog';
} else {
} else if (scrollTop >= detailTop && scrollTop < catalogTop) {
activeTab.value = 'detail';
}
};
}, 100);
// 处理标签页切换
// 在script setup中添加
......@@ -253,19 +278,18 @@ const getTransitionTiming = (current, previous) => {
// 修改handleTabChange函数
const handleTabChange = (name) => {
previousTab.value = activeTab.value;
activeTab.value = name; // 立即更新activeTab的值
let offset = 100; // 调整偏移量, 配合目录的高度
setTimeout(() => {
nextTick(() => {
const element = document.getElementById(name);
if (element) {
const topOffset = element.offsetTop - offset - parseInt(topWrapperHeight.value);
window.scrollTo({
top: topOffset,
behavior: 'smooth'
});
}
});
}, 100);
nextTick(() => {
const element = document.getElementById(name);
if (element) {
const topOffset = element.offsetTop - offset - parseInt(topWrapperHeight.value);
window.scrollTo({
top: topOffset,
behavior: 'smooth'
});
}
});
};
// 课程数据
......