hookehuyr

refactor(轮播组件): 优化轮播滚动逻辑并更新favicon路径

将轮播滚动处理逻辑拆分为独立函数以提高可读性
更新默认favicon路径从vite.svg改为vite.jpg
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];
......