From f044f321956946f1cc45a9e8a20d4493d93c45ca Mon Sep 17 00:00:00 2001
From: huangze <huang.ze@ebiz-digits.com>
Date: Fri, 4 Jul 2025 11:01:26 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E9=95=BF=E5=9B=BE?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在图片未完全展示完成但是高度已经确定的时候开始跳转
---
 src/views/service/views/service-info.vue | 61 +++++++++++++++---------
 1 file changed, 39 insertions(+), 22 deletions(-)

diff --git a/src/views/service/views/service-info.vue b/src/views/service/views/service-info.vue
index 766c0bb..97d7828 100644
--- a/src/views/service/views/service-info.vue
+++ b/src/views/service/views/service-info.vue
@@ -44,15 +44,15 @@ export default {
         }
     },
     watch: {
-        // 监听路由参数变化
-        '$route.params': {
-            handler(newParams) {
-                if (newParams.position) {
-                    this.scrollToBlock();
-                }
-            },
-            immediate: true
-        },
+        // // 监听路由参数变化
+        // '$route.params': {
+        //     handler(newParams) {
+        //         if (newParams.position) {
+        //             this.scrollToBlock();
+        //         }
+        //     },
+        //     immediate: true
+        // },
         // 监听当前块position变化
         'currentBlockId': function (newId) {
             if (newId) {
@@ -74,16 +74,16 @@ export default {
 
                 // 使用setTimeout确保 DOM 已经完全渲染
                 this.$nextTick(() => {
-                    setTimeout(() => {
-                        const element = document.getElementById(`block-${position}`);
-                        if (element) {
-                            // 滚动到元素位置
-                            window.scrollTo({
-                                top: element.offsetTop - 70,  // 偏移70px给顶部留出空间
-                            });
-                            this.hasScrolled = true;
-                        }
-                    }, 800); // 添加短暂延迟确保DOM已更新
+                    // setTimeout(() => {
+                    const element = document.getElementById(`block-${position}`);
+                    if (element) {
+                        // 滚动到元素位置
+                        window.scrollTo({
+                            top: element.offsetTop - 70,  // 偏移70px给顶部留出空间
+                        });
+                        this.hasScrolled = true;
+                    }
+                    // }, 800); // 添加短暂延迟确保DOM已更新
                 });
             }
         },
@@ -98,10 +98,27 @@ export default {
                     position: position
                 }
             })
+        },
+        handleImageLoad() {
+            const images = document.querySelectorAll('.block-image');
+            const loadPromises = Array.from(images).map(img => {
+                return new Promise(resolve => {
+                    const checkInterval = setInterval(() => {
+                        if (img.naturalHeight > 0) {
+                            clearInterval(checkInterval);
+                            resolve();
+                        }
+                    },50);
+                });
+            });
+
+            Promise.all(loadPromises).then(() => {
+                this.scrollToBlock()
+            });
+
         }
-    },
-    mounted() {
-        this.scrollToBlock();
+    }, mounted() {
+        this.handleImageLoad()
     }
 }
 </script>