在Vue3中实现一个返回顶部组件

最近在使用字节跳动的开源组件库Acro Design Vue时，遇到了一个问题，就是返回顶部的组件，无论如何都不会显示出来(应该是我自身页面的原因，组件应该是没有问题的)，故只能自己上手造一个了!

思路

1. 实时获取当前页面高度并监听高度变化
2. 当高度超过设定的距离之后显示组件
3. 点击组件即可返回顶部

template

<div class="icons" v-show="visiable" @click="handleScrollTop">
        <!-- 需要显示的icon图标 -->
	<icon-caret-up size="2rem" class="icon" />
	<p class="text">返回顶部</p>
</div>

css

.icons {
	position: fixed;
	right: 3rem;
	bottom: 7rem;
	width: 2rem;
	height: 2rem;
	padding: 0.5rem;
	background-color: #2c3e50;
	box-shadow: 0px 3px 3px rgb(133, 133, 133);
	cursor: pointer;
}
.icons > .icon {
	color: #1abc9c;
}
.icons > .text {
	display: none;
	font: bold 100% Consolas, Monaco, monospace;
	margin: 0;
	text-align: center;
	color: #2980b9;
}
.icons:hover > .text {
	display: block;
}
.icons:hover > .icon {
	display: none;
}

js setup写法

定义对应变量

import { ref, onMounted, onUnmounted } from 'vue'
const scrollTop = ref('') // 距顶部距离
const visiable = ref(false) // 是否显示组件
let done = false // 是否停止帧函数

检测距离

// 检测距离
function handleScroll() {
	scrollTop.value =
		window.pageYOffset ||
		document.documentElement.scrollTop ||
		document.body.scrollTop
	scrollTop.value > 500 ? (visiable.value = true) : (visiable.value = false)
}

动画帧函数

// 动画帧函数
function step() {
	scrollTop.value <= 0 ? (done = true) : (done = false)
	window.scrollTo({
		top: (scrollTop.value -= 15)
	})
	if (!done) {
		window.requestAnimationFrame(step)
	}
}

返回顶部方法

// 返回顶部
function handleScrollTop() {
	// 下一次重绘之前更新动画帧所调用的函数 60次1秒
	// https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame
	window.requestAnimationFrame(step)
}

设置监听与卸载

// 设置监听与卸载
onMounted(() => {
	window.addEventListener('scroll', handleScroll)
})
onUnmounted(() => {
	window.removeEventListener('scroll', handleScroll)
})
</script>

实例使用

最后

希望这篇文章能够帮到你！