vue返回顶部的组件BackTop

使用原生js进行封装，不依赖任何东西，核心是requestAnimationFrame方法，有对组件进行兼容性处理。
学习了Coderwhy老师在b站Vue2视频如果你不想使用better-scroll，可以去我的 github 查看源码。“HomebackTop分析.md”文件中有详细的解析，如果你不懂欢迎联系我。

<template>
  <div @click="backTopBtn(move)">
    <slot />
  </div>
</template>

<script>
export default {
  name: "BackTop",
  props: {
  	//每一帧移动的距离
    move: {
      type: Number,
      default: 300,
    },
  },
  methods: {
    backTopBtn(move) {
      clearTimeout(this.timer); 
      cancelAnimationFrame(this.timer);
      const fn = () => {
        const scrollY = document.documentElement.scrollTop;
        if (scrollY > 0) {
          document.documentElement.scrollTop = scrollY - move;
          requestAnimationFrame(fn) || setTimeout(fn, 1000/60);
        } else {
          cancelAnimationFrame(this.timer) || clearTimeout(this.timer);
        }
      };
      this.timer = requestAnimationFrame(fn) || setTimeout(fn, 1000/60);
    },
  },
};
</script>
<style>
</style>

这个组件主要是可以用于移动端的项目，建议放在common文件夹中（公共组件文件夹），他的主要的作用是面对不同的刷新率的手机也可以做到动画不卡顿。

如果不懂requestAnimationFrame()这个api可以看我的这篇文章，代码有不理解的地方欢迎咨询我。

感兴趣还可以关注我的：

cnsd：m0_46217225

掘金：寸头男生

github：Buzz_cut

微信公众号：web_mycode

知乎：寸头男生

我的QQ：2356924146

我会持续的编程干货。