fix(StudyCoursePage): 调整页面滚动和高度计算的延迟逻辑
为了解决页面滚动和高度计算时可能出现的布局未完全渲染的问题,增加了 setTimeout 延迟逻辑,并调整了滚动偏移量,确保滚动定位准确
Showing
1 changed file
with
6 additions
and
1 deletions
| ... | @@ -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 | // 课程数据 | ... | ... |
-
Please register or login to post a comment