Vue封装回到顶部公共组件(动画过渡)-案例

梦里梦外; 2022-09-03 05:15 186阅读 0赞

# 演示 #

![20210805181920513.gif][]

> Top.vue

<template>
      <div class="goTop" v-show="goTopShow" @click="goTop">
        
        <img src="./assets/images/btn/top.png" alt="Top">
      </div>
    </template>
    <script>
    export default {
      name: "goTop",
      data() {
        return {
          scrollTop: "",
          goTopShow: false,
        };
      },
      watch: {
        scrollTop(val) {
          if (this.scrollTop > 500) {
            this.goTopShow = true;
          } else {
            this.goTopShow = false;
          }
        },
      },
      methods: {
        handleScroll() {
          this.scrollTop =
            window.pageYOffset ||
            document.documentElement.scrollTop ||
            document.body.scrollTop;
          if (this.scrollTop > 500) {
            this.goTopShow = true;
          }
        },
        goTop() {
          let timer = null,
            _that = this;
          cancelAnimationFrame(timer);
          timer = requestAnimationFrame(function fn() {
            if (_that.scrollTop > 0) {
              _that.scrollTop -= 250;
              document.body.scrollTop = document.documentElement.scrollTop =
                _that.scrollTop;
              timer = requestAnimationFrame(fn);
            } else {
              cancelAnimationFrame(timer);
              _that.goTopShow = false;
            }
          });
        },
      },
      mounted() {
        window.addEventListener("scroll", this.handleScroll);
      },
      destroyed() {
        window.removeEventListener("scroll", this.handleScroll);
      },
    };
    </script>
    
    <style lang="scss" scoped>
    .goTop {
      position: fixed;
      right: 40px;
      bottom: 60px;
      cursor: pointer;
      img{
         width: 60px;
         height: 60px; 
      }
    }
    </style>

# 使用 #

//引入组件
    import Top from "@/components/common/Top";
    
    //注册组件
    export default {
      components: {
        Top,
      },
    }
    
    //页面使用组件
    <template>
      <div>
        <Top />
      </div>
    </template>

[20210805181920513.gif]: /images/20220829/50357815719d48ea930d76763c6fb527.png