From 5674ab25f2eef18e80e7cabf861888f837173383 Mon Sep 17 00:00:00 2001 From: 2153917462 <2153917462@qq.com> Date: Fri, 25 Apr 2025 16:57:32 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E4=BF=A1=E6=81=AF=E7=AE=A1?= =?UTF-8?q?=E7=90=86=E5=A4=B4=E9=83=A8=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/manage-add/index.vue | 41 ++++++++++++++----------- src/views/manage-info/index.vue | 54 ++++++++++++++++++--------------- 2 files changed, 54 insertions(+), 41 deletions(-) diff --git a/src/views/manage-add/index.vue b/src/views/manage-add/index.vue index 210703c..4ef68b6 100644 --- a/src/views/manage-add/index.vue +++ b/src/views/manage-add/index.vue @@ -289,6 +289,7 @@ export default { }, projectRemarks: [], loading: false, + scrollTimeout: null, }; }, created() { @@ -473,28 +474,34 @@ export default { return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; }, handleScroll() { - // 获取滚动容器 const container = document.querySelector(".containerbody"); if (!container) return; - - // 获取容器的滚动位置 - const scrollPosition = container.scrollTop; // 添加偏移量，让菜单提前高亮 - - // 从下往上检查各部分，找到第一个顶部位置小于等于滚动位置的部分 - for (let i = this.sections.length - 1; i >= 0; i--) { - const element = document.getElementById(this.sections[i].id); - if (element) { - // 计算元素相对于滚动容器的位置 - const elementPosition = element.offsetTop - container.offsetTop; - - if (elementPosition <= scrollPosition) { - if (this.activeSection !== this.sections[i].id) { - this.activeSection = this.sections[i].id; + if (this.scrollTimeout) { + clearTimeout(this.scrollTimeout); + } + this.scrollTimeout = setTimeout(() => { + const scrollPosition = container.scrollTop; + if (scrollPosition > this.lastScrollTop) { + this.scrollDirection = 'down'; + } else { + this.scrollDirection = 'up'; + } + this.lastScrollTop = scrollPosition; + const offset = this.scrollDirection === 'down' ? 500 : 200; + const adjustedScrollPosition = scrollPosition + offset; + for (let i = this.sections.length - 1; i >= 0; i--) { + const element = document.getElementById(this.sections[i].id); + if (element) { + const elementPosition = element.offsetTop - container.offsetTop; + if (elementPosition <= adjustedScrollPosition) { + if (this.activeSection !== this.sections[i].id) { + this.activeSection = this.sections[i].id; + } + break; } - break; } } - } + }, 50); }, handleMenuClick() { if (this.$refs.menuRef) { diff --git a/src/views/manage-info/index.vue b/src/views/manage-info/index.vue index 3ae830d..67a4dd1 100644 --- a/src/views/manage-info/index.vue +++ b/src/views/manage-info/index.vue @@ -200,7 +200,7 @@ export default { { id: "basic", label: "基本信息" }, { id: "programme", label: "规划信息" }, { id: "buildings", label: "建筑信息" }, - { id: "models", label: "要素模型信息" }, + { id: "models", label: "五要素模型信息" }, { id: "months", label: "月度进展信息" }, { id: "companyenter", label: "企业入驻信息" }, { id: "projectpicture", label: "项目画像" }, @@ -213,6 +213,9 @@ export default { projectId: null, isContainerVisible: true, isSubmitted: false, + lastScrollTop: 0, + scrollDirection: 'down', + scrollTimeout: null, basicInformation: { acceptanceTime: "", begainTime: "", @@ -282,10 +285,10 @@ export default { }, projectRemarks: [], loading: false, + scrollTimeout: null, }; }, created() { - // 从路由参数中获取 projectId this.projectId = Number(this.$route.params.id); this.loadData(); this.action = this.$route.query.action; @@ -296,8 +299,6 @@ export default { if (container) { container.addEventListener("scroll", this.handleScroll); } - // 添加全局点击监听器，用于移除菜单焦点 - // document.addEventListener('click', this.handleGlobalClick); }, beforeDestroy() { window.removeEventListener("scroll", this.handleScroll); @@ -305,8 +306,6 @@ export default { if (container) { container.removeEventListener("scroll", this.handleScroll); } - // 移除全局点击监听器 - // document.removeEventListener('click', this.handleGlobalClick); }, methods: { checkPermi, @@ -348,30 +347,37 @@ export default { this.$router.go(-1); }, handleScroll() { - // 获取滚动容器 const container = document.querySelector(".containerbody"); if (!container) return; - - // 获取容器的滚动位置 - const scrollPosition = container.scrollTop; // 添加偏移量，让菜单提前高亮 - - // 从下往上检查各部分，找到第一个顶部位置小于等于滚动位置的部分 - for (let i = this.sections.length - 1; i >= 0; i--) { - const element = document.getElementById(this.sections[i].id); - if (element) { - // 计算元素相对于滚动容器的位置 - const elementPosition = element.offsetTop - container.offsetTop; - - if (elementPosition <= scrollPosition) { - if (this.activeSection !== this.sections[i].id) { - this.activeSection = this.sections[i].id; + if (this.scrollTimeout) { + clearTimeout(this.scrollTimeout); + } + this.scrollTimeout = setTimeout(() => { + const scrollPosition = container.scrollTop; + if (scrollPosition > this.lastScrollTop) { + this.scrollDirection = 'down'; + } else { + this.scrollDirection = 'up'; + } + this.lastScrollTop = scrollPosition; + const offset = this.scrollDirection === 'down' ? 500 : 200; + const adjustedScrollPosition = scrollPosition + offset; + for (let i = this.sections.length - 1; i >= 0; i--) { + const element = document.getElementById(this.sections[i].id); + if (element) { + const elementPosition = element.offsetTop - container.offsetTop; + if (elementPosition <= adjustedScrollPosition) { + if (this.activeSection !== this.sections[i].id) { + console.log(`切换到 ${this.sections[i].label}，位置: ${elementPosition}，偏移: ${offset}`); + this.activeSection = this.sections[i].id; + } + break; } - break; } } - } + }, 50); }, - // 子组件的 + // 子组件的更新 handleDataUpdate(dataKey, updatedData) { if (dataKey === "projectOtherInfos" || dataKey === "wysmxInformations") { if (Array.isArray(updatedData)) {