一个沙雕的vue backtop组件

最新推荐文章于 2022-11-02 11:29:18 发布

小刀拉屁股让你开开眼

最新推荐文章于 2022-11-02 11:29:18 发布

阅读量454

点赞数 2

分类专栏： vue js 文章标签： javascript vue.js

本文链接：https://blog.csdn.net/qq_38292936/article/details/115435384

版权

vue 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

8 篇文章 0 订阅

订阅专栏

效果：
在这里插入图片描述

代码：

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