Vue2返回顶部组件使用分析（附代码）
程序员文章站
2022-06-04 16:46:22
页面滚离顶部一定距离的时候显示返回顶部图标，点击图片一定的速度返回顶部。
文件路径：src\components\public\gotop.vue
...
页面滚离顶部一定距离的时候显示返回顶部图标，点击图片一定的速度返回顶部。
文件路径：src\components\public\gotop.vue
<template>
<p id="gotop">
<p class="gotop" v-show="gotopshow" @click="gotop"><i class="gotopicon"></i></p>
</p>
</template>
<script>
export default {
name: "gotop",
data(){
return{
scrolltop: '',
gotopshow:false,
}
},
methods:{
handlescroll () {
this.scrolltop = window.pageyoffset || document.documentelement.scrolltop || document.body.scrolltop
if(this.scrolltop>500){
this.gotopshow=true
}
},
gotop(){
let timer=null,_that=this;
cancelanimationframe(timer)
timer=requestanimationframe(function fn(){
if(_that.scrolltop>0){
_that.scrolltop-=50;
document.body.scrolltop = document.documentelement.scrolltop = _that.scrolltop;
timer=requestanimationframe(fn)
}else {
cancelanimationframe(timer);
_that.gotopshow=false;
}
})
}
},
mounted() {
window.addeventlistener('scroll', this.handlescroll);
},
destroyed(){
window.removeeventlistener('scroll', this.handlescroll)
}
}
</script>
<style scoped>
.gotop{
position: fixed;
right: 20px;
bottom: 50px;
width: 50px;
height: 50px;
background:rgba(0,0,0,.65);
}
.gotop:hover{
background:rgba(0,0,0,.85);
}
.gotopicon{
display: block;
width: 50px;
height: 50px;
background-image: url("data:image/png;base64,ivborw0kggoaaaansuheugaaacaaaaagcayaaabzenr0aaabauleqvryr+2w7u3dqbbe31qajaqdukjsaxqa6qaqacqadggvbcoakoaocbwedgatzechyex8ayqqvd/p59t3s7tjiz2h9pyfawbq4h8ryptq0mefseqlgo0hycvp1hwim4dtoxachadzrhcdagxfazdaffm74elsbvslwgpypgmi4uxsqmc2taygrqcsrnesqov1vcu5baasnn8dwpyyeaiejyukg1fbhfcqb00ggimqjh+rfi2xddtx+6omeewamhxghfgajqw5r/yhhcuint6xe6a6lgspfcxktszve1gcvqmibbchjicxpgwtmiyq0tohxkukae7dlebinhhzrg31m0nvowgxybnvvocui5wzjgjarc4tnwbsnwm3qdg0kt4dswfe9b5vah0crqszu9gawhyt1x3oaepjss+3ltyfigzz/lxyzdri+zgsnim1fkd3z0vjgdqnakmromhtq7vugwagbqyfvgcufkahukyywwaaaabjru5erkjggg==");
background-repeat: no-repeat;
background-position: center center;
}
</style>
引用方式以及文件路径：src\components\show.vue
<template>
<p id="show">
<v-gotop></v-gotop>
</p>
</template>
<script>
<strong>import </strong>gotop <strong>from </strong>"./public/gotop";
<strong>export default </strong>{
data() {
<strong>return </strong>{
data: []
}
},
components:{
'v-gotop': gotop
},
methods: {
}
}
</script>
<style scoped>
</style> 上一篇： 郭台铭：引进机器人不影响员工招聘