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

我会持续的编程干货。

vue返回顶部的组件BackTop相关推荐

vue制作顶部栏组件
**制作顶部标题栏 ** 1.创建Detail标题栏显示页面 <template><div><detail-nav-bar></detail-nav-bar& ...
vue 封装返回顶部组件
我的环境是vue+vant+ts, 相信大家应该知道怎么改成vue+js的写法先看效果图: HTML: <template><!-- 返回顶部组件 2020-02-17 Walke ...
手机端html返回顶部,vue实现移动端返回顶部
本文实例为大家分享了vue实现移动端返回顶部的具体代码,供大家参考,具体内容如下 HTML: 1 ▲ JS: export default { data() { return { isShow: tr ...
vue3返回顶部组件(丝滑)
vue3返回顶部组件(丝滑) 我这里使用了阿里的字体图标,需要自己配置一下 <template><div v-if="btnShow" style="p ...
vue 移动端顶部导航组件
废话不多说,下面是我自己写的vue移动端顶部导航组件给大家分享一下 ,动态绑定背景颜色,字体颜色,以及回退图标.需要的直接拿去放项目里用吧- 示例图: HTML <template>< ...
前端 vue 自定义导航栏组件高度及返回箭头自定义 tabbar 图标
前端vue自定义导航栏组件高度及返回箭头自定义tabbar图标, 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=12986 喜 ...
Vue 简单的记录div滚动条的位置，并返回顶部
效果图: .vue 在最外层的div:<div @scroll="divScroll" >引入返回顶部的图标:<img class="imgTop&qu ...
vite + vue3 + 封装axios + 封装loading + 封装返回顶部
前言前期回顾 vite + vue3 + ts配置<企业级项目>二次封装el-table.分页_0.活在风浪里的博客-CSDN博客封装的功能有哪些?分页.表格排序.文字居中. ...
vue刘海屏兼容组件
vue 刘海屏兼容组件 /* 无返回按钮的标头 */ <template><div v-if="GLOBAL.evnType === GLOBAL.ENV_TYPES.AP ...

vue返回顶部的组件BackTop

感兴趣还可以关注我的：

vue返回顶部的组件BackTop相关推荐

最新文章

热门文章