vue3滚动到顶部钩子函数+组件简单示例

1.滚动到顶部钩子函数

import { debounce } from 'lodash-es'
import { nextTick, onMounted, onUnmounted, Ref, ref } from 'vue'const useScrollToTop = (scrollRef: Ref) => {const showButton = ref(false)const handleScroll = (event: any) => {showButton.value = event.srcElement.scrollTop > 300}const scrollToTop = () => {if (scrollRef.value) {scrollRef.value.scrollTo({top: 0,behavior: 'smooth'})}}const initScroll = () => {const dom = scrollRef.valueif (dom) {dom.addEventListener('scroll', debounce(handleScroll, 200), true)}}// 添加滚动事件监听器onMounted(() => {nextTick(() => {initScroll()})})// 移除滚动事件监听器onUnmounted(() => {const dom = scrollRef.valuedom && dom.removeEventListener('scroll', handleScroll)})return {showButton,scrollToTop}
}export default useScrollToTop

2.在回到顶部按钮使用钩子函数：

<template><div class="return-to-top-container"><div v-show="showButton" @click="scrollToTop" class="return-to-top-button"><van-icon name="arrow-up" color="#fff" /><van-icon class="up-icon-2" name="arrow-up" color="#fff" /></div></div>
</template><script lang="ts" setup>
import { Ref, toRefs } from 'vue'
import useScrollToTop from '../hooks/useScrollToTop'const props = defineProps<{scrollRef: Ref
}>()
const { scrollRef } = toRefs(props)
const { showButton, scrollToTop } = useScrollToTop(scrollRef)
</script><style lang="less" scoped>
.return-to-top-container {position: fixed;bottom: 20px;right: 20px;z-index: 9999999999999;
}.return-to-top-button {display: flex;flex-direction: column;justify-content: center;align-items: center;width: 30px;height: 30px;border: none;border-radius: 50%;background-color: rgba(#3498db, 0.5);color: rgba(#fff, 0.5);transition: background-color 0.3s ease;cursor: pointer;
}.up-icon-2 {margin-top: -7px;
}
</style>

3.直接在页面使用(只展示核心部分）：

<template><div class="career-page"><HeaderMenu class="header-menu" :menus="menus" @handle-menu="handleMenu" /><div class="flex-1" ref="scrollRef"><router-view /></div></div>
</template><script setup lang="ts">
import HeaderMenu from './HeaderMenu2.vue'
import useScrollToTop from './useScrollToTop'const menus = [...菜单数组略...]
// 加到滚动元素上
const scrollRef = ref()
const { scrollToTop } = useScrollToTop(scrollRef)const handleMenu = (name: string) => {// 回到顶部scrollToTop()
}
</script>

继续加滚动到顶部按钮：

<template><div class="career-page"><HeaderMenu class="header-menu" :menus="menus" @handle-menu="handleMenu" /><div class="flex-1" ref="scrollRef"><ScrollToTopButton :scrollRef="scrollRef" /><router-view /></div></div>
</template><script setup lang="ts">
import HeaderMenu from './HeaderMenu2.vue'
import ScrollToTopButton from './ScrollToTopButton.vue'
import useScrollToTop from './useScrollToTop'const menus = [...菜单数组略...]
// 加到滚动元素上
const scrollRef = ref()
const { scrollToTop } = useScrollToTop(scrollRef)const handleMenu = (name: string) => {// 回到顶部scrollToTop()
}
</script>

4.如果是爷孙组件，可以使用provide提供数据，inject接收数据，再使用钩子函数

深层父级页面provide:

<template><div class="career-page"><HeaderMenu class="header-menu" :menus="menus" @handle-menu="handleMenu" /><div class="flex-1" ref="scrollRef"><ScrollToTopButton :scrollRef="scrollRef" /><router-view /></div></div>
</template><script setup lang="ts">
import { provide } from 'vue'
import HeaderMenu from './HeaderMenu2.vue'
import ScrollToTopButton from './ScrollToTopButton.vue'
import useScrollToTop from './useScrollToTop'const menus = [...菜单数组略...]
// 加到滚动元素上
const scrollRef = ref()
provide('scrollRef ', scrollRef)
const { scrollToTop } = useScrollToTop(scrollRef)const handleMenu = (name: string) => {// 回到顶部scrollToTop()
}
</script>

深层子级页面inject，使用下面的钩子：

import { useRouter } from 'vue-router'
import useXStore from '@/x-store'
import { isMobileEnv } from '@/utils'
import { inject } from 'vue'
import useScrollToTop from './useScrollToTop'const useDetail= () => {const router = useRouter()const xStore = useXStore()const scrollRef = inject<any>('scrollRef')const { scrollToTop } = useScrollToTop(scrollRef)const gotoOther = () => {scrollToTop()router.push({path: '/other',query: {a: '1111'}})xStore.setActiveTab('other')}return {gotoOther,}
}
export default useDetail