Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
d7318bb8 1 parent 799198ac

fix(HomePage): 修复监听activeTab变化时内容区域位置重置问题 

在监听activeTab变化时，使用nextTick确保DOM更新后再执行滚动操作，以避免潜在的布局计算错误
Inline Side-by-side
Showing 1 changed file with 11 additions and 9 deletions
1 <!-- 1 <!--
2 * @Date: 2025-03-20 19:55:21 2 * @Date: 2025-03-20 19:55:21
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-03-25 17:48:53 4 + * @LastEditTime: 2025-03-25 17:52:17
5 * @FilePath: /mlaj/src/views/HomePage.vue 5 * @FilePath: /mlaj/src/views/HomePage.vue
6 * @Description: 亲子学院首页组件 6 * @Description: 亲子学院首页组件
7 * 7 *
...@@ -679,13 +679,15 @@ const contentRef = ref(null) // 内容区域的ref引用 ...@@ -679,13 +679,15 @@ const contentRef = ref(null) // 内容区域的ref引用
679 679
680 // 监听activeTab变化，重置内容区域位置 680 // 监听activeTab变化，重置内容区域位置
681 watch(activeTab, () => { 681 watch(activeTab, () => {
682 - if (contentRef.value) { 682 + nextTick(() => {
683 - const navHeight = document.querySelector('.sticky').offsetHeight; 683 + if (contentRef.value) {
684 - const marginTop = parseInt(window.getComputedStyle(contentRef.value).marginTop); 684 + const navHeight = document.querySelector('.sticky').offsetHeight;
685 - window.scrollTo({ 685 + const marginTop = parseInt(window.getComputedStyle(contentRef.value).marginTop);
686 - top: contentRef.value.offsetTop - navHeight - marginTop, 686 + window.scrollTo({
687 - behavior: 'smooth' 687 + top: contentRef.value.offsetTop - navHeight - marginTop,
688 - }); 688 + behavior:'smooth'
689 - } 689 + });
690 + }
691 + })
690 }) 692 })
691 </script> 693 </script>
......