51Testing软件测试论坛

 找回密码
 (注-册)加入51Testing

QQ登录

只需一步,快速开始

微信登录,快人一步

手机号码,快捷登录

查看: 1939|回复: 1
打印 上一主题 下一主题

vue+element-ui 回到顶部组件

[复制链接]

该用户从未签到

跳转到指定楼层
1#
发表于 2019-3-26 14:58:20 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
背景

开发框架是vue+webpack+element-ui,需要一个回到顶部的通用组件。

开发HTML部分

code:

  1. <template>
  2.   <transition name="el-fade-in">
  3.     <div class="page-up" @click="scrollToTop" v-show="toTopShow">
  4.       <i class="el-icon-caret-top"></i>
  5.     </div>
  6.   </transition>
  7. </template>
复制代码

这里使用了一个进入动画,看起来自然一点。


CSS部分

code:

  1. <style scoped lang="scss">
  2.   .page-up{
  3.     background-color: #409eff;
  4.     position: fixed;
  5.     right: 50px;
  6.     bottom: 30px;
  7.     width: 40px;
  8.     height: 40px;
  9.     border-radius: 20px;
  10.     cursor: pointer;
  11.     transition: .3s;
  12.     box-shadow: 0 3px 6px rgba(0, 0, 0, .5);
  13.     opacity: .5;
  14.     z-index: 100;
  15.     .el-icon-caret-top{
  16.       color: #fff;
  17.       display: block;
  18.       line-height: 40px;
  19.       text-align: center;
  20.       font-size: 18px;
  21.     }
  22.     p{
  23.       display: none;
  24.       text-align: center;
  25.       color: #fff;
  26.     }
  27.     &:hover{
  28.       opacity: 1;
  29.     }
  30.   }
  31. </style>
复制代码

这也没啥说的,自己觉得好看就行。


JavaScript部分

这里是重点了,主要是监听两个事件:

屏幕滚动事件
回到顶部按钮的点击事件

屏幕滚动事件

code:

  1. mounted() {
  2.     this.$nextTick(function () {
  3.         window.addEventListener('scroll', this.handleScroll,true);
  4.     });
  5. },
  6. destroyed() {
  7.     window.addEventListener('scroll', this.handleScroll,true);
  8. }
复制代码

这里有两个注意事项:

注意是将事件绑定在window上,监听整个文档的滚动,也可以绑在document或者document.body上
需要在元素加载之后再监听滚动事件
需要将addEventListener的第三个参数设置为true,即取消冒泡,要不然会绑定不成功

code:

  1. handleScroll() {
  2.     let dom =document.getElementsByClassName('content-container')[0];
  3.     this.scrollTop = dom.scrollTop;
  4.     if (this.scrollTop > 300) {
  5.         this.toTopShow = true;
  6.     }else {
  7.         this.toTopShow = false;
  8.     }
  9. },
复制代码

这里需要注意的地方是:

一开始不必将回到顶部按钮显示出来,等用户将页面往下滑动一段距离之后再显示回到顶部按钮,这样更加符合用户的操作习惯

回到顶部按钮的点击事件

code:

  1. scrollToTop() {
  2.       let timer = null;
  3.       let _this = this;
  4.       cancelAnimationFrame(timer);
  5.       timer = requestAnimationFrame(function fn() {
  6.         if (_this.scrollTop > 5000) {
  7.           _this.scrollTop -= 1000;
  8.           document.getElementsByClassName("content-container")[0].scrollTop =
  9.             _this.scrollTop;
  10.           timer = requestAnimationFrame(fn);
  11.         } else if (_this.scrollTop > 1000 && _this.scrollTop <= 5000) {
  12.           _this.scrollTop -= 500;
  13.           document.getElementsByClassName("content-container")[0].scrollTop =
  14.             _this.scrollTop;
  15.           timer = requestAnimationFrame(fn);
  16.         } else if (_this.scrollTop > 200 && _this.scrollTop <= 1000) {
  17.           _this.scrollTop -= 100;
  18.           document.getElementsByClassName("content-container")[0].scrollTop =
  19.             _this.scrollTop;
  20.           timer = requestAnimationFrame(fn);
  21.         } else if (_this.scrollTop > 50 && _this.scrollTop <= 200) {
  22.           _this.scrollTop -= 10;
  23.           document.getElementsByClassName("content-container")[0].scrollTop =
  24.             _this.scrollTop;
  25.           timer = requestAnimationFrame(fn);
  26.         } else if (_this.scrollTop > 0 && _this.scrollTop <= 50) {
  27.           _this.scrollTop -= 5;
  28.           document.getElementsByClassName("content-container")[0].scrollTop =
  29.             _this.scrollTop;
  30.           timer = requestAnimationFrame(fn);
  31.         } else {
  32.           cancelAnimationFrame(timer);
  33.           _this.toTopShow = false;
  34.         }
  35.       });
  36.     }
复制代码

这里需要主要几点:

使用requestAnimationFrame,优点就不必多说了
正常情况下回到顶部的速度是由快变慢的,这样看起来更加符合用户的使用习惯,而且效果也更加好看
将距离顶部的距离划分为五个部分,每个部分的速度都不一样



分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏
回复

使用道具 举报

该用户从未签到

2#
发表于 2019-3-29 10:06:23 | 只看该作者
好用,谢谢啦,content-container这个用参数传进来会更方便
回复 支持 反对

使用道具 举报

本版积分规则

关闭

站长推荐上一条 /1 下一条

小黑屋|手机版|Archiver|51Testing软件测试网 ( 沪ICP备05003035号 关于我们

GMT+8, 2024-11-15 01:22 , Processed in 0.064375 second(s), 22 queries .

Powered by Discuz! X3.2

© 2001-2024 Comsenz Inc.

快速回复 返回顶部 返回列表