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 相关文章推荐
最短的IE判断代码
Mar 13 Javascript
js中Math之random,round,ceil,floor的用法总结
Dec 26 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
Jan 07 Javascript
javascript获取当前的时间戳的方法汇总
Jul 26 Javascript
JS实现的页面自定义滚动条效果
Oct 26 Javascript
jquery中validate与form插件提交的方式小结
Mar 26 Javascript
JavaScript浏览器对象之一Window对象详解
Jun 03 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
Sep 12 Javascript
微信小程序实现录音时的麦克风动画效果实例
May 18 Javascript
解决Antd 里面的select 选择框联动触发的问题
Oct 24 Javascript
JavaScript实现商品评价五星好评
Nov 30 Javascript
给原生html中添加水印遮罩层的实现示例
Apr 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
打造计数器DIY三步曲(上)
2006/10/09 PHP
浅析php中三个等号(===)和两个等号(==)的区别
2013/08/06 PHP
php采集自中央气象台范围覆盖全国的天气预报代码实例
2015/01/04 PHP
Codeigniter的dom类用法实例
2015/06/26 PHP
PDO实现学生管理系统
2020/03/21 PHP
基于jquery的direction图片渐变动画效果
2010/05/24 Javascript
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
2010/08/03 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
2013/09/30 Javascript
JS仿百度搜索自动提示框匹配查询功能
2013/11/21 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
2013/12/17 Javascript
js比较日期大小的方法
2015/05/12 Javascript
jQuery添加删除DOM元素方法详解
2016/01/18 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
JS判断元素是否在数组内的实现代码
2016/03/30 Javascript
JS动态修改网页body的背景色实例代码
2017/10/07 Javascript
Less 安装及基本用法
2018/05/05 Javascript
javascript实现导航栏分页效果
2019/06/27 Javascript
使用Typescript开发微信小程序的步骤详解
2021/01/12 Javascript
[43:35]TI4 循环赛第二日Liquid vs Fnatic
2014/07/11 DOTA
python 布尔操作实现代码
2013/03/23 Python
python django集成cas验证系统
2014/07/14 Python
Python中os.path用法分析
2015/01/15 Python
python消费kafka数据批量插入到es的方法
2018/12/27 Python
Python设计模式之工厂方法模式实例详解
2019/01/18 Python
python 中如何获取列表的索引
2019/07/02 Python
python使用matplotlib绘制雷达图
2019/10/18 Python
python开发实例之Python的Twisted框架中Deferred对象的详细用法与实例
2020/03/19 Python
解决Pymongo insert时会自动添加_id的问题
2020/12/05 Python
HTML 5.1来了 9月份正式发布 更新内容预览
2016/04/26 HTML / CSS
印度尼西亚最完整和最大的在线药房网站:Farmaku.com
2019/11/23 全球购物
新西兰最大、占有率最高的综合性药房:PharmacyDirect药房中文网
2020/11/03 全球购物
人力资源管理毕业生自荐信
2013/11/21 职场文书
超市开店计划书
2014/04/26 职场文书
大学新学期计划书
2014/04/28 职场文书
小学生差生评语
2014/12/29 职场文书
OpenFeign实现远程调用
2022/08/14 Java/Android