From ee92c2a0828f6872b4bd120038daff49c86941a6 Mon Sep 17 00:00:00 2001 From: huliyong <2783385703@qq.com> Date: Wed, 5 Nov 2025 16:04:36 +0800 Subject: [PATCH] =?UTF-8?q?refactor(book.vue):=20=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E5=85=83=E7=B4=A0=E4=BD=8D=E7=BD=AE=E8=AE=A1=E7=AE=97=E9=80=BB?= =?UTF-8?q?=E8=BE=91=E5=B9=B6=E6=B7=BB=E5=8A=A0=E5=94=AF=E4=B8=80ID?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 重构getAllElementPositions方法，使用DOM API替代原有实现 为scroll-view和内容元素添加唯一ID以便精确定位 移除不必要的注释代码和调试日志 调整图片样式去除固定高度限制 --- subPages/home/book.vue | 131 ++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 103 insertions(+), 28 deletions(-) diff --git a/subPages/home/book.vue b/subPages/home/book.vue index 0cb8dc2..5a49a5a 100644 --- a/subPages/home/book.vue +++ b/subPages/home/book.vue @@ -20,7 +20,9 @@ {{ currentPageTitle }} @@ -40,19 +42,10 @@ 划线重点 - - - + :ref="`imageRef_${index}_${itemIndex}`" :id="`image-${itemIndex}`"> - + 视频加载中... @@ -795,7 +788,7 @@ export default { } } - console.log('开始滚动到文本:', { selector, scrollData }); + //console.log('开始滚动到文本:', { selector, scrollData }); // 标记正在滚动 this.isScrolling = true; @@ -954,14 +947,15 @@ export default { }, // 获取所有页面元素的位置信息 + /* async getAllElementPositions() { return new Promise((resolve) => { // 检查缓存是否存在 - if (this.elementPositionsCache[this.currentPage - 1]) { - resolve(this.elementPositionsCache[this.currentPage - 1]); - return; - } + // if (this.elementPositionsCache[this.currentPage - 1]) { + // resolve(this.elementPositionsCache[this.currentPage - 1]); + // return; + // } const currentPageData = this.bookPages[this.currentPage - 1]; if (!currentPageData || !Array.isArray(currentPageData)) { @@ -981,9 +975,9 @@ export default { if (item.type === 'text') { query.select(`#text-${index}`).boundingClientRect(); } else if (item.type === 'image') { - query.select(`.image-container`).boundingClientRect(); + query.select(`#image-${index}`).boundingClientRect(); } else if (item.type === 'video') { - query.select(`.video-content`).boundingClientRect(); + query.select(`#video-${index}`).boundingClientRect(); } } }); @@ -998,19 +992,28 @@ export default { // 处理查询结果 let resultIndex = 1; // 跳过第一个容器结果 + let constTop = 0 + let constTopType = { + 'text': 10, + 'image': 10, + 'video': 10, + } currentPageData.forEach((item, index) => { if (item && (item.type === 'text' || item.type === 'image' || item.type === 'video')) { const elementRect = res[resultIndex]; if (elementRect) { - let top = elementRect.top - (containerRect.height / 2); + const currentScrollTop = this.scrollTops[this.currentPage - 1] || 0; + const top = constTop; + // const top = (elementRect.top - containerRect.top) + currentScrollTop; elementPositions.push({ - id : elementRect.id, - index: index, + id: elementRect.id, + index, type: item.type, - top: top, + top, height: elementRect.height, bottom: top + elementRect.height }); + constTop += elementRect.height + constTopType[item.type]; } resultIndex++; } @@ -1026,6 +1029,79 @@ export default { return elementPositions; }); }, + */ + + // 使用浏览器 DOM API 获取所有页面元素的位置信息（H5） + async getAllElementPositions() { + // const cached = this.elementPositionsCache[this.currentPage - 1]; + // if (cached && Array.isArray(cached)) { + // return cached; + // } + + const currentPageData = this.bookPages[this.currentPage - 1]; + if (!currentPageData || !Array.isArray(currentPageData)) { + return []; + } + + // 确保 DOM 已更新 + await this.$nextTick(); + + const rootEl = this.$el || document; + let currentPage = this.currentPage - 1; + let containerId = `scroll-container-${currentPage}`; + const containerEl = (rootEl.querySelector ? rootEl.querySelector(`#${containerId}`) : null) || document.querySelector('.scroll-container'); + if (!containerEl || typeof containerEl.getBoundingClientRect !== 'function') { + console.warn('[getAllElementPositions] 未找到滚动容器或不支持 DOM API'); + return []; + } + + const containerRect = containerEl.getBoundingClientRect(); + // console.log('document.getElementById containerEl', containerEl); + + const currentScrollTop = this.scrollTops[this.currentPage] || 0; + const elementPositions = []; + + let constTop = 0 + let constTopType = { + 'text': 10, + 'image': 10, + 'video': 10, + } + currentPageData.forEach((item, index) => { + if (!item || !item.type) return; + let el = document.querySelector(`#${containerId} #${item.type}-${index}`); + + // console.log('document.getElementById', `${item.type}-${index}`, el.clientHeight, el); + + if (el && typeof el.getBoundingClientRect === 'function') { + const rect = el.getBoundingClientRect(); + const top = constTop; + elementPositions.push({ + id: el.id || '', + index, + type: item.type, + top, + height: rect.height, + bottom: top + rect.height + }); + constTop += rect.height + constTopType[item.type]; + } + }); + + if (elementPositions.length > 0) { + this.elementPositionsCache[this.currentPage - 1] = elementPositions; + } + + return elementPositions; + }, + + awaitSleep(time) { + return new Promise((resolve) => { + setTimeout(() => { + resolve(); + }, time); + }); + }, // 检查元素是否在可视范围内 isElementInViewport(elementPosition, currentScrollTop) { @@ -1926,7 +2002,6 @@ export default { // 清理單詞語音緩存 clearWordAudioCache() { this.wordAudioCache = {}; - }, // 限制缓存大小，保留最近访问的页面 @@ -2365,7 +2440,7 @@ export default { .card-image { // width: 590rpx; width: 100%; - height: 268rpx; + //height: 268rpx; border-radius: 24rpx; margin: 30rpx auto; // margin-bottom: 20rpx;