hookehuyr

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

在标签页切换时,添加标记以避免重复处理滚动事件。同时调整了开课时间的显示格式,并移除了不再使用的字段
...@@ -47,9 +47,9 @@ ...@@ -47,9 +47,9 @@
47 <div id="intro" class="py-4 px-4"> 47 <div id="intro" class="py-4 px-4">
48 <h1 class="text-lg font-bold mb-2">{{ course.title }}</h1> 48 <h1 class="text-lg font-bold mb-2">{{ course.title }}</h1>
49 <div class="text-gray-500 text-sm flex items-center gap-2"> 49 <div class="text-gray-500 text-sm flex items-center gap-2">
50 - <span>{{ dayjs(course.schedule_time).format('YYYY-MM-DD') }}</span> 50 + <span>开课时间 {{ dayjs(course.schedule_time).format('YYYY-MM-DD HH:mm:ss') }}</span>
51 - <span class="text-gray-300">|</span> 51 + <!-- <span class="text-gray-300">|</span> -->
52 - <span>没有字段{{ course.studyCount || 0 }}次学习</span> 52 + <!-- <span>没有字段{{ course.studyCount || 0 }}次学习</span> -->
53 </div> 53 </div>
54 </div> 54 </div>
55 55
...@@ -273,7 +273,13 @@ useTitle('学习详情'); ...@@ -273,7 +273,13 @@ useTitle('学习详情');
273 const topWrapperHeight = ref(0); 273 const topWrapperHeight = ref(0);
274 const bottomWrapperHeight = ref(0); 274 const bottomWrapperHeight = ref(0);
275 275
276 +// 标记是否由tab切换触发的滚动
277 +const isTabScrolling = ref(false);
278 +
276 const handleScroll = () => { 279 const handleScroll = () => {
280 + // 如果是由tab切换触发的滚动,不处理
281 + if (isTabScrolling.value) return;
282 +
277 const introElement = document.getElementById('intro'); 283 const introElement = document.getElementById('intro');
278 const commentElement = document.getElementById('comment'); 284 const commentElement = document.getElementById('comment');
279 if (!introElement || !commentElement) return; 285 if (!introElement || !commentElement) return;
...@@ -384,6 +390,13 @@ const submitComment = async () => { ...@@ -384,6 +390,13 @@ const submitComment = async () => {
384 390
385 // 处理标签页切换 391 // 处理标签页切换
386 const handleTabChange = (name) => { 392 const handleTabChange = (name) => {
393 + // 先更新activeTab值
394 + activeTab.value = name;
395 +
396 + // 设置标记,表示这是由tab切换触发的滚动
397 + isTabScrolling.value = true;
398 +
399 + // 然后执行滚动操作
387 nextTick(() => { 400 nextTick(() => {
388 const element = document.getElementById(name === 'intro' ? 'intro' : 'comment'); 401 const element = document.getElementById(name === 'intro' ? 'intro' : 'comment');
389 if (element) { 402 if (element) {
...@@ -392,8 +405,15 @@ const handleTabChange = (name) => { ...@@ -392,8 +405,15 @@ const handleTabChange = (name) => {
392 top: topOffset, 405 top: topOffset,
393 behavior: 'smooth' 406 behavior: 'smooth'
394 }); 407 });
408 +
409 + // 滚动动画结束后重置标记
410 + setTimeout(() => {
411 + isTabScrolling.value = false;
412 + }, 500); // 假设滚动动画持续500ms
413 + } else {
414 + isTabScrolling.value = false;
395 } 415 }
396 - }) 416 + });
397 }; 417 };
398 418
399 419
......