hookehuyr

fix(StudyDetailPage): 修复标签页切换时的滚动处理

在标签页切换时,添加标记以避免重复处理滚动事件。同时调整了开课时间的显示格式,并移除了不再使用的字段
......@@ -47,9 +47,9 @@
<div id="intro" class="py-4 px-4">
<h1 class="text-lg font-bold mb-2">{{ course.title }}</h1>
<div class="text-gray-500 text-sm flex items-center gap-2">
<span>{{ dayjs(course.schedule_time).format('YYYY-MM-DD') }}</span>
<span class="text-gray-300">|</span>
<span>没有字段{{ course.studyCount || 0 }}次学习</span>
<span>开课时间 {{ dayjs(course.schedule_time).format('YYYY-MM-DD HH:mm:ss') }}</span>
<!-- <span class="text-gray-300">|</span> -->
<!-- <span>没有字段{{ course.studyCount || 0 }}次学习</span> -->
</div>
</div>
......@@ -273,7 +273,13 @@ useTitle('学习详情');
const topWrapperHeight = ref(0);
const bottomWrapperHeight = ref(0);
// 标记是否由tab切换触发的滚动
const isTabScrolling = ref(false);
const handleScroll = () => {
// 如果是由tab切换触发的滚动,不处理
if (isTabScrolling.value) return;
const introElement = document.getElementById('intro');
const commentElement = document.getElementById('comment');
if (!introElement || !commentElement) return;
......@@ -384,6 +390,13 @@ const submitComment = async () => {
// 处理标签页切换
const handleTabChange = (name) => {
// 先更新activeTab值
activeTab.value = name;
// 设置标记,表示这是由tab切换触发的滚动
isTabScrolling.value = true;
// 然后执行滚动操作
nextTick(() => {
const element = document.getElementById(name === 'intro' ? 'intro' : 'comment');
if (element) {
......@@ -392,8 +405,15 @@ const handleTabChange = (name) => {
top: topOffset,
behavior: 'smooth'
});
// 滚动动画结束后重置标记
setTimeout(() => {
isTabScrolling.value = false;
}, 500); // 假设滚动动画持续500ms
} else {
isTabScrolling.value = false;
}
})
});
};
......