feat: 重构应用加载流程和动画管理
- 新增 AppLoader 组件作为全局加载器 - 引入 Pinia 状态管理应用加载状态 - 创建 usePageScrollLock 组合式函数管理滚动锁定 - 重构首页动画流程,使用 Promise 链式调用 - 移除旧的 HomeLoader 组件 - 优化头部导航栏的入场动画触发逻辑
This commit is contained in:
@@ -0,0 +1,50 @@
|
||||
import { onMounted, onBeforeUnmount, watch, type Ref } from 'vue'
|
||||
import { useNuxtApp } from '#app'
|
||||
import type Lenis from 'lenis'
|
||||
import { useAppStore } from '~/stores/app'
|
||||
|
||||
export const usePageScrollLock = (isLocked: Ref<boolean> | boolean) => {
|
||||
const { $lenis } = useNuxtApp() as ReturnType<typeof useNuxtApp> & { $lenis?: Lenis }
|
||||
|
||||
const lockScroll = () => {
|
||||
if (import.meta.client) {
|
||||
document.documentElement.classList.add('is-home-intro-active')
|
||||
$lenis?.scrollTo(0, { immediate: true })
|
||||
$lenis?.stop()
|
||||
}
|
||||
}
|
||||
|
||||
const unlockScroll = () => {
|
||||
if (import.meta.client) {
|
||||
document.documentElement.classList.remove('is-home-intro-active')
|
||||
$lenis?.start()
|
||||
}
|
||||
}
|
||||
|
||||
// If passed a boolean, lock immediately and unlock on unmount
|
||||
if (typeof isLocked === 'boolean') {
|
||||
if (isLocked) {
|
||||
onMounted(() => {
|
||||
lockScroll()
|
||||
})
|
||||
onBeforeUnmount(() => {
|
||||
unlockScroll()
|
||||
})
|
||||
}
|
||||
} else {
|
||||
// If passed a ref, watch its value
|
||||
watch(isLocked, (locked) => {
|
||||
if (locked) {
|
||||
lockScroll()
|
||||
} else {
|
||||
unlockScroll()
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
unlockScroll()
|
||||
})
|
||||
}
|
||||
|
||||
return { lockScroll, unlockScroll }
|
||||
}
|
||||
Reference in New Issue
Block a user