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 序列化对象实现代码
Dec 18 Javascript
js解析与序列化json数据(二)序列化探讨
Feb 01 Javascript
JS去除字符串两端空格的简单实例
Dec 27 Javascript
Javascript正则控制文本框只能输入整数或浮点数
Sep 02 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
Oct 31 Javascript
详解JavaScript对W3C DOM模版的支持情况
Jun 16 Javascript
js点击返回跳转到指定页面实现过程
Aug 20 Javascript
JavaScript日期对象(Date)基本用法示例
Jan 18 Javascript
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
细说webpack源码之compile流程-入口函数run
Dec 26 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
Dec 19 Javascript
js定义类的方法示例【ES5与ES6】
Jul 30 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中的函数嵌套层数限制分析
2011/06/13 PHP
使用JQUERY进行后台页面布局控制DIV实现左右式
2014/01/07 Javascript
jQuery照片伸缩效果不影响其他元素的布局
2014/05/09 Javascript
JavaScript函数获取事件源的小例子
2014/05/14 Javascript
node.js中的fs.utimesSync方法使用说明
2014/12/15 Javascript
Javascript编写俄罗斯方块思路及实例
2015/07/07 Javascript
JavaScript实现算术平方根算法-代码超简单
2015/09/11 Javascript
jquery中object对象循环遍历的方法
2015/12/18 Javascript
Web前端开发工具——bower依赖包管理工具
2016/03/29 Javascript
React组件的三种写法总结
2017/01/12 Javascript
微信小程序实战之自定义toast(6)
2017/04/18 Javascript
angular使用post、get向后台传参的问题实例
2017/05/27 Javascript
Vue实现路由跳转和嵌套
2017/06/20 Javascript
Angular整合zTree的示例代码
2018/01/24 Javascript
详解javascript中的变量提升和函数提升
2018/05/24 Javascript
详解Angular中通过$location获取地址栏的参数
2018/08/02 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
2019/07/24 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
2020/02/27 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
2020/09/10 Javascript
在Python中操作文件之read()方法的使用教程
2015/05/24 Python
详解Python编程中对Monkey Patch猴子补丁开发方式的运用
2016/05/27 Python
小小聊天室Python代码实现
2016/08/17 Python
Python 实现随机数详解及实例代码
2017/04/15 Python
python读取Kafka实例
2019/12/23 Python
python+opencv边缘提取与各函数参数解析
2020/03/09 Python
欧舒丹澳洲版:L’OCCITANE
2017/07/17 全球购物
科颜氏法国官网:Kiehl’s法国
2019/08/20 全球购物
精细化工应届生求职信
2013/11/17 职场文书
采购部主管岗位职责
2014/01/01 职场文书
就业意向书范文
2014/04/01 职场文书
垃圾分类的活动方案
2014/08/15 职场文书
写给医生的感谢信
2015/01/22 职场文书
学生检讨书范文
2015/01/27 职场文书
银行实习推荐信
2015/03/27 职场文书
2015年反洗钱工作总结
2015/04/25 职场文书
使用 CSS 构建强大且酷炫的粒子动画效果
2022/08/14 HTML / CSS