当前位置 博文首页 > 文章内容

    vue backtop组件的实现完整代码

    作者:21344 栏目:未分类 时间:2021-04-07 14:42:46

    效果:

    在这里插入图片描述

    代码:

    <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>