hookehuyr

fix(StudyCoursePage): 调整页面滚动和高度计算的延迟逻辑

为了解决页面滚动和高度计算时可能出现的布局未完全渲染的问题,增加了 setTimeout 延迟逻辑,并调整了滚动偏移量,确保滚动定位准确
......@@ -139,20 +139,22 @@ const tabRefs = ref([]);
// 计算topWrapperHeight的函数
const updateTopWrapperHeight = () => {
nextTick(() => {
const topWrapper = document.querySelector('.top-wrapper');
if (topWrapper) {
// 断开之前的observer连接
if (resizeObserver.value) {
resizeObserver.value.disconnect();
setTimeout(() => {
nextTick(() => {
const topWrapper = document.querySelector('.top-wrapper');
if (topWrapper) {
// 断开之前的observer连接
if (resizeObserver.value) {
resizeObserver.value.disconnect();
}
// 使用 ResizeObserver 监听元素尺寸变化
resizeObserver.value = new ResizeObserver(() => {
topWrapperHeight.value = `${topWrapper.offsetHeight}px`;
});
resizeObserver.value.observe(topWrapper);
}
// 使用 ResizeObserver 监听元素尺寸变化
resizeObserver.value = new ResizeObserver(() => {
topWrapperHeight.value = `${topWrapper.offsetHeight}px`;
});
resizeObserver.value.observe(topWrapper);
}
});
});
}, 500)
};
const course = ref([]);
......@@ -251,16 +253,19 @@ const getTransitionTiming = (current, previous) => {
// 修改handleTabChange函数
const handleTabChange = (name) => {
previousTab.value = activeTab.value;
nextTick(() => {
const element = document.getElementById(name);
if (element) {
const topOffset = element.offsetTop - parseInt(topWrapperHeight.value);
window.scrollTo({
top: topOffset,
behavior: 'smooth'
});
}
});
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);
};
// 课程数据
......