hookehuyr

feat(StudyDetailPage): 添加滚动监听以更新活动标签

在StudyDetailPage组件中添加滚动监听,根据滚动位置动态更新活动标签。同时,在组件卸载时移除滚动监听以避免内存泄漏。
......@@ -202,6 +202,22 @@ useTitle('学习详情');
const topWrapperHeight = ref(0);
const bottomWrapperHeight = ref(0);
const handleScroll = () => {
const introElement = document.getElementById('intro');
const commentElement = document.getElementById('comment');
if (!introElement || !commentElement) return;
const scrollTop = window.scrollY;
const commentOffset = commentElement.offsetTop - parseInt(topWrapperHeight.value);
// 根据滚动位置更新activeTab
if (scrollTop >= commentOffset) {
activeTab.value = 'comments';
} else {
activeTab.value = 'intro';
}
};
onMounted(() => {
nextTick(() => {
const topWrapper = document.querySelector('.top-wrapper');
......@@ -212,6 +228,9 @@ onMounted(() => {
if (bottomWrapper) {
bottomWrapperHeight.value = bottomWrapper.clientHeight + 'px';
}
// 添加滚动监听
window.addEventListener('scroll', handleScroll);
})
const courseId = route.params.id;
if (courseId) {
......@@ -269,6 +288,11 @@ const handleTabChange = (name) => {
};
// 在组件卸载时移除滚动监听
onUnmounted(() => {
window.removeEventListener('scroll', handleScroll);
});
</script>
<style lang="less" scoped>
......