fix(StudyDetailPage): 调整评论区域滚动偏移量并重新计算容器高度
将评论区域的滚动偏移量从30调整为20,以提高用户体验。同时,在点击课程时重新计算顶部和底部容器的高度,确保布局正确
Showing
1 changed file
with
13 additions
and
1 deletions
| ... | @@ -332,7 +332,7 @@ const handleScroll = () => { | ... | @@ -332,7 +332,7 @@ const handleScroll = () => { |
| 332 | if (!introElement || !commentElement) return; | 332 | if (!introElement || !commentElement) return; |
| 333 | 333 | ||
| 334 | const scrollTop = window.scrollY; | 334 | const scrollTop = window.scrollY; |
| 335 | - const commentOffset = commentElement.offsetTop - parseInt(topWrapperHeight.value) - 30; // 30是一个偏移量 | 335 | + const commentOffset = commentElement.offsetTop - parseInt(topWrapperHeight.value) - 20; // 20是一个偏移量 |
| 336 | 336 | ||
| 337 | // 根据滚动位置更新activeTab | 337 | // 根据滚动位置更新activeTab |
| 338 | if (scrollTop >= commentOffset) { | 338 | if (scrollTop >= commentOffset) { |
| ... | @@ -365,6 +365,18 @@ const handleLessonClick = async (lesson) => { | ... | @@ -365,6 +365,18 @@ const handleLessonClick = async (lesson) => { |
| 365 | commentList.value = comment.data.comment_list; | 365 | commentList.value = comment.data.comment_list; |
| 366 | commentCount.value = comment.data.comment_count; | 366 | commentCount.value = comment.data.comment_count; |
| 367 | } | 367 | } |
| 368 | + | ||
| 369 | + // 重新计算顶部和底部容器的高度 | ||
| 370 | + nextTick(() => { | ||
| 371 | + const topWrapper = document.querySelector('.top-wrapper'); | ||
| 372 | + const bottomWrapper = document.querySelector('.bottom-wrapper'); | ||
| 373 | + if (topWrapper) { | ||
| 374 | + topWrapperHeight.value = topWrapper.clientHeight + 'px'; | ||
| 375 | + } | ||
| 376 | + if (bottomWrapper) { | ||
| 377 | + bottomWrapperHeight.value = bottomWrapper.clientHeight + 'px'; | ||
| 378 | + } | ||
| 379 | + }); | ||
| 368 | } | 380 | } |
| 369 | }; | 381 | }; |
| 370 | 382 | ... | ... |
-
Please register or login to post a comment