refactor(轮播组件): 优化轮播滚动逻辑并更新favicon路径
将轮播滚动处理逻辑拆分为独立函数以提高可读性 更新默认favicon路径从vite.svg改为vite.jpg
Showing
2 changed files
with
34 additions
and
35 deletions
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2025-03-20 19:55:21 | 2 | * @Date: 2025-03-20 19:55:21 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2025-12-04 16:15:23 | 4 | + * @LastEditTime: 2025-12-04 16:52:14 |
| 5 | * @FilePath: /mlaj/src/views/HomePage.vue | 5 | * @FilePath: /mlaj/src/views/HomePage.vue |
| 6 | * @Description: 美乐爱觉教育首页组件 | 6 | * @Description: 美乐爱觉教育首页组件 |
| 7 | * | 7 | * |
| ... | @@ -645,50 +645,49 @@ onMounted(async () => { | ... | @@ -645,50 +645,49 @@ onMounted(async () => { |
| 645 | 645 | ||
| 646 | // 监听轮播容器的滚动,手动滑动时同步底部指示器 | 646 | // 监听轮播容器的滚动,手动滑动时同步底部指示器 |
| 647 | if (carouselRef.value) { | 647 | if (carouselRef.value) { |
| 648 | - /** | 648 | + // 添加滚动监听(被动监听),在用户手动滑动时同步指示器 |
| 649 | + carouselRef.value.addEventListener('scroll', handle_carousel_scroll, { passive: true }) | ||
| 650 | + } | ||
| 651 | +}) | ||
| 652 | + | ||
| 653 | +onUnmounted(() => { | ||
| 654 | + if (carouselInterval) { | ||
| 655 | + clearInterval(carouselInterval) | ||
| 656 | + } | ||
| 657 | + // 卸载时移除轮播滚动监听,避免内存泄漏 | ||
| 658 | + if (carouselRef.value) { | ||
| 659 | + carouselRef.value.removeEventListener('scroll', handle_carousel_scroll) | ||
| 660 | + } | ||
| 661 | +}) | ||
| 662 | + | ||
| 663 | +const carouselRef = ref(null) // 轮播图容器引用 | ||
| 664 | + | ||
| 665 | +/** | ||
| 666 | + * @function sync_current_slide | ||
| 649 | * @description 根据滚动位置同步当前轮播索引 | 667 | * @description 根据滚动位置同步当前轮播索引 |
| 650 | - * @returns {void} | ||
| 651 | * 注释:通过容器 scrollLeft 与容器宽度计算当前页,向最近页取整。 | 668 | * 注释:通过容器 scrollLeft 与容器宽度计算当前页,向最近页取整。 |
| 669 | + * @returns {void} | ||
| 652 | */ | 670 | */ |
| 653 | - const syncCurrentSlide = () => { | 671 | +const sync_current_slide = () => { |
| 654 | const container = carouselRef.value | 672 | const container = carouselRef.value |
| 655 | const total = goodCourses.value.slice(0, 4).length | 673 | const total = goodCourses.value.slice(0, 4).length |
| 656 | if (!container || total === 0) return | 674 | if (!container || total === 0) return |
| 657 | - const slideWidth = container.offsetWidth | 675 | + const slide_width = container.offsetWidth |
| 658 | - if (slideWidth === 0) return | 676 | + if (slide_width === 0) return |
| 659 | - const rawIndex = container.scrollLeft / slideWidth | 677 | + const raw_index = container.scrollLeft / slide_width |
| 660 | - const idx = Math.round(rawIndex) | 678 | + const idx = Math.round(raw_index) |
| 661 | const bounded = Math.min(Math.max(idx, 0), total - 1) | 679 | const bounded = Math.min(Math.max(idx, 0), total - 1) |
| 662 | currentSlide.value = bounded | 680 | currentSlide.value = bounded |
| 663 | - } | 681 | +} |
| 664 | 682 | ||
| 665 | - /** | 683 | +/** |
| 666 | - * @description 轮播滚动事件处理(被动监听) | 684 | + * @function handle_carousel_scroll |
| 685 | + * @description 轮播滚动事件处理(被动监听),调用同步函数更新指示器位置。 | ||
| 667 | * @returns {void} | 686 | * @returns {void} |
| 668 | - * 注释:在用户手动滑动时触发,调用同步函数更新指示器位置。 | ||
| 669 | */ | 687 | */ |
| 670 | - const handleCarouselScroll = () => { | 688 | +const handle_carousel_scroll = () => { |
| 671 | - syncCurrentSlide() | 689 | + sync_current_slide() |
| 672 | - } | 690 | +} |
| 673 | - | ||
| 674 | - carouselRef.value.addEventListener('scroll', handleCarouselScroll, { passive: true }) | ||
| 675 | - | ||
| 676 | - // 在卸载时移除监听 | ||
| 677 | - onUnmounted(() => { | ||
| 678 | - if (carouselRef.value) { | ||
| 679 | - carouselRef.value.removeEventListener('scroll', handleCarouselScroll) | ||
| 680 | - } | ||
| 681 | - }) | ||
| 682 | - } | ||
| 683 | -}) | ||
| 684 | - | ||
| 685 | -onUnmounted(() => { | ||
| 686 | - if (carouselInterval) { | ||
| 687 | - clearInterval(carouselInterval) | ||
| 688 | - } | ||
| 689 | -}) | ||
| 690 | - | ||
| 691 | -const carouselRef = ref(null) // 轮播图容器引用 | ||
| 692 | 691 | ||
| 693 | // 右侧导航组件:搜索和消息通知 | 692 | // 右侧导航组件:搜索和消息通知 |
| 694 | 693 | ... | ... |
| ... | @@ -415,7 +415,7 @@ function remove_favicon() { | ... | @@ -415,7 +415,7 @@ function remove_favicon() { |
| 415 | 415 | ||
| 416 | /** | 416 | /** |
| 417 | * @function set_default_favicon | 417 | * @function set_default_favicon |
| 418 | - * @description 设置默认 favicon 为 /vite.svg,并通过时间戳参数避免缓存导致图标不更新。 | 418 | + * @description 设置默认 favicon 为 /vite.jpg,并通过时间戳参数避免缓存导致图标不更新。 |
| 419 | */ | 419 | */ |
| 420 | function set_default_favicon() { | 420 | function set_default_favicon() { |
| 421 | const head = document.head || document.getElementsByTagName('head')[0]; | 421 | const head = document.head || document.getElementsByTagName('head')[0]; | ... | ... |
-
Please register or login to post a comment