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组件内容请搜索NICE源码以前的文章或继续浏览下面的相关文章希望大家以后多多支持NICE源码！