×

vue开发TIPS:回到顶部插件backTop

作者:andy0012021.04.14来源:Web前端之家浏览:377评论:0
关键词:js

“回到顶部”的应用,每个网站基本都会有,之前我们都是用原生JS或者jQuery完成的,今天分享下在vue开发里如何实现。一起学习下咯。

使用方式:

<back-top :topHeight = 'topHeight' />

使用参数

参数类型是否必填默认描述
topHeightNumber500初始出现的高度
speedNumber10初始返回的速度
setSpeedNumber20加速度
rightNumber60距离浏览器右侧的距离
bottomNumber80距离游览器下面的距离

例子

我们来看个简单的DEMO代码:

<template>
  <div v-show="toTopShow" @click="handleToTop" 
  :style="{right: right + 'px', bottom: bottom +'px',}">
    <img src="../assets/img/up.png">
  </div>
</template>

<script>
  export default {
    data() {
      return {
        toTopShow: false,
        scrollTop: 0
      }
    },
    props: {
      // 开始出现的高度
      topHeight: {
        type: Number,
        default: 500
      },
      // 开始速度
      speed: {
        type: Number,
        default: 10
      },
      // 叠加速度
      setSpeed: {
        type: Number,
        default: 20
      },
      right: {
        type: Number,
        default: 60
      },
      bottom: {
        type: Number,
        default: 80
      }
    },
    mounted () {
      const self = this
      window.addEventListener('scroll', this.debounce(function () {
        self.handleScrolls()
      }, 300))
    },
    methods: {
      // 监控防抖
      debounce(fn, wait) {
        let timer = null
        return function () {
          if (timer) {
            clearTimeout(timer)
          }
          timer = setTimeout(fn, wait)
        }
      },
      // 处理滚动条的监控
      handleScrolls() {
        const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
        this.scrollTop = scrollTop
        if (scrollTop > this.topHeight) {
          this.toTopShow = true
        } else {
          this.toTopShow = false
        }
      },
      // 处理回到开始位置
      handleToTop() {
        let speed = this.speed
        const setSpeed = this.setSpeed
        const self = this
        const timer = setInterval(function() {
          self.scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
          if (self.scrollTop > 0) {
            self.scrollTop = (self.scrollTop - speed > 0) ? (self.scrollTop - speed) : 0
            speed += setSpeed
            window.scrollTo(0, self.scrollTop)
          } else {
            clearInterval(timer)
          }
        }, 60)
      }
    }
  }
</script>

<style rel="stylesheet/scss" scoped>
  .backTop {
    width: 60px;
    height: 60px;
    background-color: #2C2C2C;
    border-radius: 50%;
    position: fixed;
    /*right: 60px;*/
    /*bottom: 80px;*/
    text-align: center;
    padding-top: 2px;
    cursor: pointer;
    /* 动画 */
    transition: 0.6s;
    img {
      text-align: center;
    }
  }
  .backTop:hover {
    background-color: #868880;
  }
</style>

大家可以放到DEMO去看下效果,如有问题留言咨询哦!!!

温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/js20210414a1232.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • 访客

    红红火火恍恍惚惚...

  • 跨境电商运营

    谢谢站长的文章已经解决问题了...

  • 跨境电商运营

    非常不错的文章下次还会再来!...

  • Web前端之家

    可以的,有时间会发些关于SEO相关的文章~...

  • s4f

    SEO很难啊,小编多发点类似文章吧!...

  • Web前端之家

    应该没什么问题吧,等待官宣,毕竟还没正式公开这个版本。...

  • 这个版本,能不能作为个人系统使用,有没有什么不同...

  • Web前端之家

    现在基本都是jsonp的呀,json很少,不过处理方式都差不多。如有问题加QQ群。...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2021 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.7 Valyria