hookehuyr

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

将轮播滚动处理逻辑拆分为独立函数以提高可读性
更新默认favicon路径从vite.svg改为vite.jpg
<!--
* @Date: 2025-03-20 19:55:21
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-12-04 16:15:23
* @LastEditTime: 2025-12-04 16:52:14
* @FilePath: /mlaj/src/views/HomePage.vue
* @Description: 美乐爱觉教育首页组件
*
......@@ -645,40 +645,8 @@ onMounted(async () => {
// 监听轮播容器的滚动,手动滑动时同步底部指示器
if (carouselRef.value) {
/**
* @description 根据滚动位置同步当前轮播索引
* @returns {void}
* 注释:通过容器 scrollLeft 与容器宽度计算当前页,向最近页取整。
*/
const syncCurrentSlide = () => {
const container = carouselRef.value
const total = goodCourses.value.slice(0, 4).length
if (!container || total === 0) return
const slideWidth = container.offsetWidth
if (slideWidth === 0) return
const rawIndex = container.scrollLeft / slideWidth
const idx = Math.round(rawIndex)
const bounded = Math.min(Math.max(idx, 0), total - 1)
currentSlide.value = bounded
}
/**
* @description 轮播滚动事件处理(被动监听)
* @returns {void}
* 注释:在用户手动滑动时触发,调用同步函数更新指示器位置。
*/
const handleCarouselScroll = () => {
syncCurrentSlide()
}
carouselRef.value.addEventListener('scroll', handleCarouselScroll, { passive: true })
// 在卸载时移除监听
onUnmounted(() => {
if (carouselRef.value) {
carouselRef.value.removeEventListener('scroll', handleCarouselScroll)
}
})
// 添加滚动监听(被动监听),在用户手动滑动时同步指示器
carouselRef.value.addEventListener('scroll', handle_carousel_scroll, { passive: true })
}
})
......@@ -686,10 +654,41 @@ onUnmounted(() => {
if (carouselInterval) {
clearInterval(carouselInterval)
}
// 卸载时移除轮播滚动监听,避免内存泄漏
if (carouselRef.value) {
carouselRef.value.removeEventListener('scroll', handle_carousel_scroll)
}
})
const carouselRef = ref(null) // 轮播图容器引用
/**
* @function sync_current_slide
* @description 根据滚动位置同步当前轮播索引
* 注释:通过容器 scrollLeft 与容器宽度计算当前页,向最近页取整。
* @returns {void}
*/
const sync_current_slide = () => {
const container = carouselRef.value
const total = goodCourses.value.slice(0, 4).length
if (!container || total === 0) return
const slide_width = container.offsetWidth
if (slide_width === 0) return
const raw_index = container.scrollLeft / slide_width
const idx = Math.round(raw_index)
const bounded = Math.min(Math.max(idx, 0), total - 1)
currentSlide.value = bounded
}
/**
* @function handle_carousel_scroll
* @description 轮播滚动事件处理(被动监听),调用同步函数更新指示器位置。
* @returns {void}
*/
const handle_carousel_scroll = () => {
sync_current_slide()
}
// 右侧导航组件:搜索和消息通知
// 右侧内容组件
......
......@@ -415,7 +415,7 @@ function remove_favicon() {
/**
* @function set_default_favicon
* @description 设置默认 favicon 为 /vite.svg,并通过时间戳参数避免缓存导致图标不更新。
* @description 设置默认 favicon 为 /vite.jpg,并通过时间戳参数避免缓存导致图标不更新。
*/
function set_default_favicon() {
const head = document.head || document.getElementsByTagName('head')[0];
......