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 相关文章推荐
jquery 页面滚动到底部自动加载插件集合
Jan 31 Javascript
基于Jquery实现键盘按键监听
May 11 Javascript
关于javascript模块加载技术的一些思考
Nov 28 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
Jun 05 Javascript
JS实现的3D拖拽翻页效果代码
Oct 31 Javascript
javascript实现Email邮件显示与删除功能
Nov 21 Javascript
AngularJS向后端ASP.NET API控制器上传文件
Feb 03 Javascript
原生JS获取元素集合的子元素宽度实例
Dec 14 Javascript
深入理解vue中的$set
Jun 01 Javascript
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
Dec 28 Javascript
Vue3.0结合bootstrap创建多页面应用
May 28 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
DC《神奇女侠2》因疫情推迟上映 温子仁新恐怖片《恶性》撤档
2020/04/09 欧美动漫
一些花式咖啡的配方
2021/03/03 冲泡冲煮
php学习笔记 数组遍历实现代码
2011/06/09 PHP
php获取远程文件内容的函数
2015/11/02 PHP
PHP性能优化大全(php.ini)
2016/05/20 PHP
php使用str_replace替换多维数组的实现方法分析
2017/06/15 PHP
基于jquery的滚动新闻列表
2010/06/19 Javascript
jQuery自定义事件的简单实现代码
2014/01/27 Javascript
javascript中typeof操作符和constucor属性检测
2015/02/26 Javascript
JS动态显示表格上下frame的方法
2015/03/31 Javascript
浅谈jQuery中replace()方法
2015/05/13 Javascript
简述jQuery ajax的执行顺序
2016/01/05 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
2016/03/30 Javascript
JavaScript你不知道的一些数组方法
2017/08/18 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
2018/07/03 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
2018/07/13 Javascript
浅谈python多线程和队列管理shell程序
2015/08/04 Python
Python实现利用最大公约数求三个正整数的最小公倍数示例
2017/09/30 Python
Python基于PyGraphics包实现图片截取功能的方法
2017/12/21 Python
python实现简易云音乐播放器
2018/01/04 Python
python+opencv实现动态物体识别
2018/01/09 Python
python函数式编程学习之yield表达式形式详解
2018/03/25 Python
浅谈Django中的数据库模型类-models.py(一对一的关系)
2018/05/30 Python
python 与服务器的共享文件夹交互方法
2018/12/27 Python
python实现随机漫步方法和原理
2019/06/10 Python
将tensorflow模型打包成PB文件及PB文件读取方式
2020/01/23 Python
从一次项目重构说起CSS3自定义变量在项目的使用方法
2021/03/01 HTML / CSS
英国拳击装备购物网站:RDX Sports
2018/01/23 全球购物
alice McCALL官网:澳大利亚时尚品牌
2020/11/16 全球购物
法国春天百货官网:Printemps.com
2020/06/29 全球购物
30岁生日感言
2014/01/25 职场文书
廉洁使者实施方案
2014/03/29 职场文书
2014法制宣传日活动总结
2014/07/09 职场文书
文明单位创建材料
2014/12/24 职场文书
房地产工程部经理岗位职责
2015/04/09 职场文书
用React Native制作一个简单的游戏引擎
2021/05/27 Javascript