2024年06月15日 建站教程
功能介绍：利用vue实现一个返回头部组件，vue页面滚动到一定位置显示返回图标，点击按钮返回头部。功能放在App.vue里面，实现全站通用！
template代码：
<template>
<div id="app">
<router-view />
<!--返回头部组件-->
<van-icon name="back-top" class="backtop" v-show="showBackToTop" @click="scrollToTop" />
</div>
</template>
vuejs代码：
export default {
data() {
return {
showBackToTop: false,
scrollY: 0, // 当前滚动距离
threshold: 300 // px滚动距离阈值
}
},
created(){
window.addEventListener("scroll", this.handleScroll);
},
computed: {
// 计算属性，返回当前是否应该显示返回顶部按钮
shouldShowBackToTop() {
return this.scrollY >= this.threshold; // 假设滚动距离超过 300px 时显示按钮
}
},
watch: {
// 监听 scrollY 属性的变化，更新 showBackToTop 属性
scrollY(newValue) {
this.showBackToTop = this.shouldShowBackToTop;
}
},
methods: {
handleScroll() {
this.scrollY = window.scrollY;
},
scrollToTop(){
window.scrollTo({
top: 0,
behavior: "smooth"
});
},
}
}
css代码：
.backtop{
background: #fb5b4d;
position: fixed;
right: 20px;
bottom: 3rem;
padding: .2rem;
border-radius: 50%;
font-size: .5rem;
color: #fff;
cursor: pointer;
z-index: 10;
}
本文链接：http://so.lmcjl.com/news/6606/