fix(StudyDetailPage): 修复标签页切换时的滚动处理
在标签页切换时,添加标记以避免重复处理滚动事件。同时调整了开课时间的显示格式,并移除了不再使用的字段
Showing
1 changed file
with
24 additions
and
4 deletions
| ... | @@ -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 | ... | ... |
-
Please register or login to post a comment