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>

大功告成!

单个页面调用

操作需要调用该组件的页面文件即可,方法同上。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券