vue实现滑动超出指定距离回顶部功能


Posted in Javascript onJuly 31, 2019

本文实例为大家分享了vue实现滑动超出指定距离回顶部功能,供大家参考,具体内容如下

效果图展示:

vue实现滑动超出指定距离回顶部功能

1、当页面滑动时执行scrollToTop ()函数,判断滑动的距离是否超出指定距离,注意下面获取getElementsByClassName时,是你被滑动标签的class。

mounted() {
  window.addEventListener('scroll', this.scrollToTop, true)
 }
scrollToTop () {
  let This = this
  let dom = document.getElementsByClassName('content')[0];//获取滑动模块的信息(注意class别写错)
  This.scrollTop = dom.scrollTop;
  if (This.scrollTop > 200) {
    This.btnFlag = true
  } else {
    This.btnFlag = false
  }
}

2、当超出指定距离会出来向上的小图标,点击执行backTop ()函数回顶部。图标我是用的阿里矢量图标引入到项目中,样式自己调一下。

// 点击图标回到顶部方法,加计时器是为了缓慢回到顶部
backTop () {
  let This = this
  let timer = setInterval(() => {
    let ispeed = Math.floor(-This.scrollTop / 5)
    document.getElementsByClassName('content')[0].scrollTop = This.scrollTop + ispeed
    if (This.scrollTop === 0) {
      clearInterval(timer)
    }
  }, 16)
},

完整代码请看下面:

<template>
 <div class="scrollTop-wrap">
  <div v-if="btnFlag" class="go-top">
    <li class="iconfont iconhuidaodingbu" @click="backTop()"></li>
  </div>
 </div>
</template>
<script>
 import { httpGetMethod } from '../common/httpService'
 export default {
  name: 'scrollTop',
  data: function () {
   return {
    btnFlag:false,
    scrollTop:0//当前滑动距离
   }
  },
  mounted() {
    window.addEventListener('scroll', this.scrollToTop, true)
  },
  destroyed () {
    window.removeEventListener('scroll', this.scrollToTop, true)
  },
  methods: {
    // 点击图标回到顶部方法,加计时器是为了缓慢回到顶部
    backTop () {
      let This = this
      let timer = setInterval(() => {
        let ispeed = Math.floor(-This.scrollTop / 5)
        document.getElementsByClassName('content')[0].scrollTop = This.scrollTop + ispeed
        if (This.scrollTop === 0) {
          clearInterval(timer)
        }
      }, 16)
    },
    // 计算距离顶部的高度,当高度大于200显示回顶部图标,小于200则隐藏
    scrollToTop () {
      let This = this
      let dom = document.getElementsByClassName('content')[0];//获取滑动模块的信息(注意class别写错)
      This.scrollTop = dom.scrollTop;
      if (This.scrollTop > 200) {
        This.btnFlag = true
      } else {
        This.btnFlag = false
      }
    }
  }
 }
</script>
<style lang="scss">
 @import '../styles/mixin';
 .scrollTop-wrap {
  position: relative;
  .go-top{
   position: absolute;
   top: 430px;
   left: 260px;
   z-index: 15;
   .iconhuidaodingbu{
     font-size: 30px;
     color: #87878A;
     background-color:#fff;
     border-radius: 50%;
   }
  }
 }
</style>

在其他页面引用一下:

<template>
 <div class="wtll-wrap">
  <div calss="content">
     这里是你的滑动内容
  </div>
  <scrollTop></scrollTop>
 </div>
</template>
<script>
 import scrollTop from '../components/scrollTop'
 export default {
  name: 'wtll',
  data: function () {
   return {
   }
  },
  components: {
   scrollTop
  },
  methods: {
  }
 }
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 学习笔记二 字符串拼接
Mar 28 Javascript
扩展javascript的Date方法实现代码(prototype)
Nov 20 Javascript
js添加table的行和列 具体实现方法
Jul 22 Javascript
jquery parent和parents的区别分析
Oct 02 Javascript
Javascript 遍历页面text控件详解
Jan 06 Javascript
使用javascript实现Iframe自适应高度
Dec 24 Javascript
Bootstrap创建可折叠的组件
Feb 23 Javascript
php register_shutdown_function函数详解
Jul 23 Javascript
vue轮播图插件vue-awesome-swiper
Nov 27 Javascript
vue微信分享 vue实现当前页面分享其他页面
Dec 02 Javascript
详解vue-router 初始化时做了什么
Jun 11 Javascript
JS基于ES6新特性async await进行异步处理操作示例
Feb 02 Javascript
Vue实现回到顶部和底部动画效果
Jul 31 #Javascript
详解mpvue实现对苹果X安全区域的适配
Jul 31 #Javascript
vue将后台数据时间戳转换成日期格式
Jul 31 #Javascript
Vue Element UI + OSS实现上传文件功能
Jul 31 #Javascript
原生js代码能实现call和bind吗
Jul 31 #Javascript
微信小程序下拉框搜索功能的实现方法
Jul 31 #Javascript
javascript中undefined的本质解析
Jul 31 #Javascript
You might like
php print EOF实现方法
2009/05/21 PHP
PHP中替换换行符的几种方法小结
2012/10/15 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
php中try catch捕获异常实例详解
2020/08/06 PHP
javascript网页关闭时提醒效果脚本
2008/10/22 Javascript
jQuery常见开发技巧详细整理
2013/01/02 Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
2013/01/30 Javascript
浅谈jquery回调函数callback的使用
2015/01/30 Javascript
Javascript函数式编程简单介绍
2015/10/11 Javascript
使用JQuery FancyBox插件实现图片展示特效
2015/11/16 Javascript
Bootstrap按钮下拉菜单组件详解
2016/05/10 Javascript
js定义类的几种方法(推荐)
2016/06/08 Javascript
JS实现移动端按首字母检索城市列表附源码下载
2017/07/05 Javascript
Javascript数组方法reduce的妙用之处分享
2019/06/10 Javascript
在Express中提供静态文件的实现方法
2019/10/17 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
2020/05/06 Javascript
vue 实现setInterval 创建和销毁实例
2020/07/21 Javascript
wxPython窗口的继承机制实例分析
2014/09/28 Python
python中二维阵列的变换实例
2014/10/09 Python
20个常用Python运维库和模块
2018/02/12 Python
详解python:time模块用法
2019/03/25 Python
python中将两组数据放在一起按照某一固定顺序shuffle的实例
2019/07/15 Python
python编写简单端口扫描器
2019/09/04 Python
多版本python的pip 升级后, pip2 pip3 与python版本失配解决方法
2019/09/11 Python
Python基于yield遍历多个可迭代对象
2020/03/12 Python
Python基于requests实现模拟上传文件
2020/04/21 Python
selenium框架中driver.close()和driver.quit()关闭浏览器
2020/12/08 Python
英国第一蛋白粉品牌:Myprotein
2016/09/14 全球购物
Vans英国官方网站:美国南加州的原创极限运动潮牌
2017/01/20 全球购物
新西兰最大的天然保健及护肤品网站:HealthPost(直邮中国)
2021/02/13 全球购物
企业军训感言
2014/02/08 职场文书
倡议书格式模板
2014/05/13 职场文书
专题民主生活会对照检查材料思想汇报
2014/09/29 职场文书
2015初中团委工作总结
2015/07/28 职场文书
2015年成本会计工作总结
2015/10/14 职场文书
Golang 实现WebSockets
2022/04/24 Golang