用Vue写backToTop指令
易京
用Vue写backToTop指令
指令是Vue框架中非常有用，目前正在学习当中。
以下是参照教程写的返回顶部backToTop指令，具有以下功能。
- 点击按钮后可以返回顶部。
- 当滚动到一定位置后出消失与隐藏。
还有待改进的地方。
- 代码中有2句是重复的。
未写到一个.vue文件中，复用性不高。
以上两点努力在以后的学习中实现。
话不多说，直接上代码。
代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/vue"></script>
<title>Document</title>
<style>
body{
height: 1500px;
background: #ccc;
}
.go-top{
width: 30px;
height: 30px;
line-height:30px;
border-radius: 50%;
background: rgb(37, 148, 133);
position: fixed;
right: 30px;
bottom: 30px;
opacity: 0;
transition: all ease 1s;
-webkit-transition: all ease 1s;
text-align: center;
color: #fff;
cursor: pointer;
}
.active{
opacity: 1;
}
</style>
</head>
<body>
<div id="demo">
<div class="test" v-scroll="showTop">
<div @click="gotop" class="go-top" :class="goTop?'active':''">^</div>
</div>
</div>
<script>
Vue.directive('scroll',{
bind:function(el,binding){
window.addEventListener('scroll',()=>{
let fnc = binding.value;
fnc(el);
})
}
})
var vm = new Vue({
el: "#demo",
data:{
goTop: false,
scrollTop: ""
},
methods:{
gotop: function(){
let speed = 10;
let timer = setInterval(function(){
this.scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
if(this.scrollTop>0){
this.scrollTop = (this.scrollTop - speed >0) ? (this.scrollTop - speed) : 0;
speed += 20;
window.scrollTo(0,this.scrollTop);
}else{
clearInterval(timer);
}
},16)
},
showTop: function(){
this.scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
if(this.scrollTop>200){
this.goTop = true;
}else{
this.goTop = false;
}
}
}
})
</script>
</body>
</html>代码不好的地方，烦请各位指点。谢谢先。
类似资料：