vue backtop组件的实现完整代码

效果：

代码：

<template>
 <div class="back-top">
  <div >
   <img src="imgsrc" class="line" :class="isHide? 'isHide': 'isShow'" :style="{display: (firstShow? 'block': 'none')}" @click="backTop">
  </div>
 </div>
</template>

<script>
export default {
 name: "backTop",
 data(){
  return {
   firstShow: false,//初始化隐藏组件
   isHide: false,
   scrollFLag: true,
  }
 },
 created() {
  document.addEventListener('scroll', () => {
   let scroll = document.documentElement.scrollTop
   if(scroll > 200){
    this.isHide = false
    this.firstShow = true
   }else{
    this.isHide = true
   }
  })
 },
 methods: {
  backTop(){
   if(this.scrollFLag){
    this.scrollFLag = false
    //屏幕高度
    let scroll = document.documentElement.scrollTop
    let scrollTimer = setInterval(()=> {
     scroll -= 50
     document.documentElement.scrollTop = Math.max(scroll, 0)
     if( scroll <= 0){
      clearInterval(scrollTimer)
     }
    }, 10)
    this.scrollFLag = true
   }
  },
 },
}
</script>

<style scoped lang="scss">
.back-top{
 position: fixed;
 top: 0;
 right: 10vw;
 width: 20px;
 height: 500px;
 z-index: 200;
 .line{
  width: 12vw;
  height: 100%;
  z-index: 20;
  cursor: pointer;
  opacity: 0.8;
  transform: translateY(-100%);
  &:hover{
   opacity: 1;
  }
 }
 .isShow{
  animation: back-top-move 0.5s forwards linear, back-top-yurayura 2s 0.6s forwards linear infinite;
 }
 .isHide{
  animation: back-top-hide 0.5s forwards linear;
 }
}

@keyframes back-top-hide {
 from {
  transform: translateY(0);
 }
 to {
  transform: translateY(-100%);
 }
}

@keyframes back-top-move {
 to {
  transform: translateY(0);
 }
}
@keyframes back-top-yurayura {
 0%{transform-origin: top center;transform: rotate(0)}
 25%{transform-origin: top center;transform: rotate(2deg)}
 75%{transform-origin: top center;transform: rotate(-2deg)}
 100%{transform-origin: top center;transform: rotate(0)}
}
</style>

到此这篇关于vue backtop组件的实现完整代码的文章就介绍到这了,更多相关vue backtop组件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木！