Vue+element UI实现“回到顶部”按钮组件
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/caomage/article/details/85006973
背景
开发框架是vue+webpack+element-ui,需要一个回到顶部的通用组件。
开发
HTML部分
code:
<template><transition name="el-fade-in"> <div class="page-up" @click="scrollToTop" v-show="toTopShow"> <i class="el-icon-caret-top"></i> </div> </transition> </template>
这里使用了一个进入动画,看起来自然一点。
CSS部分
code:
<style scoped lang="scss">.page-up{ background-color: #409eff; position: fixed; right: 50px; bottom: 30px; width: 40px; height: 40px; border-radius: 20px; cursor: pointer; transition: .3s; box-shadow: 0 3px 6px rgba(0, 0, 0, .5); opacity: .5; z-index: 100; .el-icon-caret-top{ color: #fff; display: block; line-height: 40px; text-align: center; font-size: 18px; } p{ display: none; text-align: center; color: #fff; } &:hover{ opacity: 1; } } </style>
这也没啥说的,自己觉得好看就行。
JavaScript部分
这里是重点了,主要是监听两个事件:
屏幕滚动事件 回到顶部按钮的点击事件
屏幕滚动事件
code:
mounted() {this.$nextTick(function () { window.addEventListener('scroll', this.handleScroll,true); }); }, destroyed() { window.addEventListener('scroll', this.handleScroll,true); }
这里有两个注意事项:
注意是将事件绑定在window上,监听整个文档的滚动,也可以绑在document或者document.body上 需要在元素加载之后再监听滚动事件 需要将addEventListener的第三个参数设置为true,即取消冒泡,要不然会绑定不成功
code:
handleScroll() {let dom =document.getElementsByClassName('content-container')[0]; this.scrollTop = dom.scrollTop; if (this.scrollTop > 300) { this.toTopShow = true; }else { this.toTopShow = false; } },
这里需要注意的地方是:
一开始不必将回到顶部按钮显示出来,等用户将页面往下滑动一段距离之后再显示回到顶部按钮,这样更加符合用户的操作习惯
回到顶部按钮的点击事件
code:
scrollToTop() {let timer = null; let _this = this; cancelAnimationFrame(timer); timer = requestAnimationFrame(function fn() { if (_this.scrollTop > 5000) { _this.scrollTop -= 1000; document.getElementsByClassName("content-container")[0].scrollTop = _this.scrollTop; timer = requestAnimationFrame(fn); } else if (_this.scrollTop > 1000 && _this.scrollTop <= 5000) { _this.scrollTop -= 500; document.getElementsByClassName("content-container")[0].scrollTop = _this.scrollTop; timer = requestAnimationFrame(fn); } else if (_this.scrollTop > 200 && _this.scrollTop <= 1000) { _this.scrollTop -= 100; document.getElementsByClassName("content-container")[0].scrollTop = _this.scrollTop; timer = requestAnimationFrame(fn); } else if (_this.scrollTop > 50 && _this.scrollTop <= 200) { _this.scrollTop -= 10; document.getElementsByClassName("content-container")[0].scrollTop = _this.scrollTop; timer = requestAnimationFrame(fn); } else if (_this.scrollTop > 0 && _this.scrollTop <= 50) { _this.scrollTop -= 5; document.getElementsByClassName("content-container")[0].scrollTop = _this.scrollTop; timer = requestAnimationFrame(fn); } else { cancelAnimationFrame(timer); _this.toTopShow = false; } }); }
这里需要主要几点:
使用requestAnimationFrame,优点就不必多说了 正常情况下回到顶部的速度是由快变慢的,这样看起来更加符合用户的使用习惯,而且效果也更加好看 将距离顶部的距离划分为五个部分,每个部分的速度都不一样
调用
全部页面调用
- 操作App.vue
- 添加JavaScript代码
<script>
import ScrollTop from './components/ScrollTop.vue' export default { components: { 'scroll-top':ScrollTop, } } </script>
- 页面中引用
<scroll-top></scroll-top>
大功告成!
单个页面调用
操作需要调用该组件的页面文件即可,方法同上。
转载于:https://www.cnblogs.com/baoshuyan66/p/10832381.html
Vue+element UI实现“回到顶部”按钮组件相关推荐
- Vue HTML:在Vue上写Html遇到的一些问题,html的首行缩进,html的行间距,element UI的回到顶部不显示
Vue & HTML:在Vue上写Html遇到的一些问题,html的首行缩进,html的行间距,element UI的回到顶部不显示 资源: HTML 教程- (HTML5 标准) 怎么快速上 ...
- Vue Element UI 表格组件 利用插槽实现按下按钮后获得本行数据(内容)
Vue Element UI 表格组件 利用插槽实现按下按钮后获得本行数据(内容) 能够解决的问题 需要在表格中添加一个类似修改或编辑的按钮,按下按钮,弹出的窗口需要本行的渲染数据 需要向服务端提交一 ...
- vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来 前言 后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
- Vue + Element UI 实现 登陆注册基本demo实例
Vue + Element UI 实现权限管理系统 前端篇(二):Vue + Element 案例 导入项目 打开 Visual Studio Code,File --> add Folder ...
- 【前端】Vue+Element UI案例:通用后台管理系统-用户管理:Table表格增删查改、Pagination分页、搜索框
文章目录 目标 代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式 总 ...
- 【前端】Vue+Element UI案例:通用后台管理系统-用户管理:Form表单填写、Dialog对话框弹出
文章目录 目标 代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
- nodeJs + webpack+vue+ element ui 环境安装
一.安装nodeJs 1.打开NodeJs官网:https://nodejs.org/en/download/ 点击下载 2.双击安装,安装过程基本直接"NEXT"就可以了.(w ...
- better-scroll的封装实现回到顶部按钮
better-scroll的封装实现回到顶部按钮 话不多说先上效果: 实现better-scroll封装之前,先了解better-scroll的使用初始化等操作[better-scroll初始化] b ...
- 【前端】Vue+Element UI案例:通用后台管理系统-代码总结(已开源)
文章目录 前言 项目文件目录 api mockServe home.js permission.js index.js mock.js user.js assert components Common ...
最新文章
- WPF中ControlTemplate和DataTemplate的区别
- 软工实践第四次作业——团队展示
- 【Prometheus】存储
- Spring 获取 request 的几种方法及其线程安全性分析
- C/C++基础面试-Sizof的全面理解
- matlab 刻度间隔,matlab – 地图的主要和次要刻度?
- 如何在 go 中实现一个 worker-pool?
- 存储过程生成所有实体类
- [渝粤教育] 西南科技大学 农业技术经济学 在线考试复习资料
- 备份VMWare ESXi虚拟机
- 学计算机干眼,​长期使用电脑 小心干眼症
- 51单片机最小系统板制作
- 一个基于WinHttp的轻量级的分片下载库介绍
- 计算机科学与技术培养计划,计算机科学与技术专业培养方案(2017版).PDF
- 并列关系表合集PPT模板
- linux ikev1切换到ikev2,IKEv2与IKEv1的差异.doc
- linux ping结果中mdev,ping之mdev值
- 浅谈进程地址空间与虚拟存储空间
- 小白有这六个Python学习网站,比那些收费几百几千的还要好用
- android:手机与BLE-CC41-A蓝牙模块通信
热门文章
- Python2.7 安装numpy报错解决方法
- CakePHP中出现persistent is not writable等Warning的解决方法
- UESTC 1811 Hero Saving Princess
- listener.ora、sqlnet.ora、tnsnames.ora 详解
- 经典算法研究系列:二、Dijkstra 算法初探
- UNICODE使用的一些知识和技巧
- 将Project的内容导出成单独的XPO文件
- kettle读取不到oracle,kettle链接Oracle数据库,百试不爽!
- 从上往下 流式布局_教大家怎么写前端布局
- 华为机考HJ2计算字符个数