hookehuyr

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

为了解决页面滚动和高度计算时可能出现的布局未完全渲染的问题,增加了 setTimeout 延迟逻辑,并调整了滚动偏移量,确保滚动定位准确
...@@ -139,6 +139,7 @@ const tabRefs = ref([]); ...@@ -139,6 +139,7 @@ const tabRefs = ref([]);
139 139
140 // 计算topWrapperHeight的函数 140 // 计算topWrapperHeight的函数
141 const updateTopWrapperHeight = () => { 141 const updateTopWrapperHeight = () => {
142 + setTimeout(() => {
142 nextTick(() => { 143 nextTick(() => {
143 const topWrapper = document.querySelector('.top-wrapper'); 144 const topWrapper = document.querySelector('.top-wrapper');
144 if (topWrapper) { 145 if (topWrapper) {
...@@ -153,6 +154,7 @@ const updateTopWrapperHeight = () => { ...@@ -153,6 +154,7 @@ const updateTopWrapperHeight = () => {
153 resizeObserver.value.observe(topWrapper); 154 resizeObserver.value.observe(topWrapper);
154 } 155 }
155 }); 156 });
157 + }, 500)
156 }; 158 };
157 159
158 const course = ref([]); 160 const course = ref([]);
...@@ -251,16 +253,19 @@ const getTransitionTiming = (current, previous) => { ...@@ -251,16 +253,19 @@ const getTransitionTiming = (current, previous) => {
251 // 修改handleTabChange函数 253 // 修改handleTabChange函数
252 const handleTabChange = (name) => { 254 const handleTabChange = (name) => {
253 previousTab.value = activeTab.value; 255 previousTab.value = activeTab.value;
256 + let offset = 100; // 调整偏移量, 配合目录的高度
257 + setTimeout(() => {
254 nextTick(() => { 258 nextTick(() => {
255 const element = document.getElementById(name); 259 const element = document.getElementById(name);
256 if (element) { 260 if (element) {
257 - const topOffset = element.offsetTop - parseInt(topWrapperHeight.value); 261 + const topOffset = element.offsetTop - offset - parseInt(topWrapperHeight.value);
258 window.scrollTo({ 262 window.scrollTo({
259 top: topOffset, 263 top: topOffset,
260 behavior: 'smooth' 264 behavior: 'smooth'
261 }); 265 });
262 } 266 }
263 }); 267 });
268 + }, 100);
264 }; 269 };
265 270
266 // 课程数据 271 // 课程数据
......