vue回到顶部监听滚动事件详解


Posted in Javascript onAugust 02, 2019

本文实例为大家分享了vue回到顶部监听滚动事件,供大家参考,具体内容如下

鼠标滚到到页面中间出现的工具浮框

<template>
<div class="tools">
<ul @mouseleave="mouseLeave()">
<li @click="toTop(step)">回到顶部</li>
<li @mouseover="mouseOver(1)">QQ</li>
<li @mouseover="mouseOver(2)">微信</li>
</ul>
<div v-if="showIndex === 1">玩QQ</div>
<div v-if="showIndex === 2">玩微信</div>
</div>
</template>
<script>
export default {
 name: 'FloatTools',
 props: {
 step: { //此数据是控制动画快慢的
  type: Number,
  default: 50
 }
 },
 data() {
 return {
  isActive: false,
  showIndex:0//默认显示下标
 }
 },
 methods: {
 toTop(i) {
  //参数i表示间隔的幅度大小,以此来控制速度 
  document.documentElement.scrollTop -= i;
  if (document.documentElement.scrollTop > 0) {
  var c = setTimeout(() => this.toTop(i), 16);
  } else {
  clearTimeout(c);
  }
 },
 handleScroll() {
  //获取滚动距顶部的距离,显示
  let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
  if (scrollTop > 60) {
  this.isActive = true;
  } else {
  this.isActive = false;
  }
 },
 mouseOver(index) {
 //鼠标移到哪个工具上,对应内容显示出来
  this.showIndex = index;
 },
 mouseLeave(){
 //鼠标移出工具区域后1秒,内容区域消失 
  let timer = setTimeout(() => {
   this.showIndex = 0;
   clearTimeout(timer)
  }, 500);
 }
 },
 mounted: function () {
 window.addEventListener('scroll', this.handleScroll, true); // 监听(绑定)滚轮滚动事件
 },
 destroyed() {
 window.removeEventListener('scroll', this.handleScroll); //离开页面需要移除这个监听的事件
 }

}
</script>

如果遇到scroll一直打印是0,看是否样式写了overflow:auto去掉即可;或者给父级撑满屏幕;

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

Javascript 相关文章推荐
Javascript 判断 object 的特定类转载
Feb 01 Javascript
Javascript的闭包
Dec 31 Javascript
JQuery Study Notes 学习笔记(一)
Aug 04 Javascript
JS限制上传图片大小不使用控件在本地实现
Dec 19 Javascript
javascript 处理null及null值示例
Jun 09 Javascript
node.js中的fs.chownSync方法使用说明
Dec 16 Javascript
js如何改变文章的字体大小
Jan 08 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
Nov 30 Javascript
Vue组件选项props实例详解
Aug 18 Javascript
详解小程序设置缓存并且不覆盖原有数据
Apr 15 Javascript
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
JavaScript数组类型Array相关的属性与方法详解
Sep 08 Javascript
微信小程序npm引入vant-weapp的踩坑记录
Aug 01 #Javascript
vue3.0中的双向数据绑定方法及优缺点
Aug 01 #Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
Aug 01 #Javascript
微信小程序使用Vant Weapp组件库的方法步骤
Aug 01 #Javascript
微信小程序中button去除默认的边框实例代码
Aug 01 #Javascript
vue-router两种模式区别及使用注意事项详解
Aug 01 #Javascript
jQuery中DOM常见操作实例小结
Aug 01 #jQuery
You might like
php实现图片以base64显示的方法
2016/10/13 PHP
php中分页及SqlHelper类用法实例
2017/01/12 PHP
ThinkPHP 模板引擎使用详解
2017/05/07 PHP
PHP基于PDO实现的SQLite操作类【包含增删改查及事务等操作】
2017/06/21 PHP
Yii1.1框架实现PHP极光推送消息通知功能
2018/09/06 PHP
用JTrackBar实现的模拟苹果风格的滚动条
2007/08/06 Javascript
jquery 查找新建元素代码
2010/07/06 Javascript
微信小程序 开发之顶部导航栏实例代码
2017/02/23 Javascript
Vue父子模版传值及组件传值的三种方法
2017/11/27 Javascript
微信小程序图片选择区域裁剪实现方法
2017/12/02 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
2018/04/04 Javascript
vue-router重定向和路由别名的使用讲解
2019/01/19 Javascript
详解js加减乘除精确计算
2019/03/19 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
2020/10/29 Javascript
[07:09]2014DOTA2国际邀请赛-Newbee再次发威成功晋级决赛
2014/07/19 DOTA
python生成每日报表数据(Excel)并邮件发送的实例
2019/02/03 Python
python实现支付宝转账接口
2019/05/07 Python
Python爬虫实现“盗取”微信好友信息的方法分析
2019/09/16 Python
PyCharm更改字体和界面样式的方法步骤
2019/09/27 Python
django框架使用views.py的函数对表进行增删改查内容操作详解【models.py中表的创建、views.py中函数的使用,基于对象的跨表查询】
2019/12/12 Python
使用python去除图片白色像素的实例
2019/12/12 Python
Python统计学一数据的概括性度量详解
2020/03/03 Python
Python 实现自动完成A4标签排版打印功能
2020/04/09 Python
Scrapy-Redis之RedisSpider与RedisCrawlSpider详解
2020/11/18 Python
AmazeUI 加载进度条的实现示例
2020/08/20 HTML / CSS
DJI全球:DJI Global
2021/03/15 全球购物
销售类个人求职信范文
2013/09/25 职场文书
文秘专业大学生求职信
2013/11/10 职场文书
英语系本科生求职信范文
2013/12/18 职场文书
垃圾分类的活动方案
2014/08/15 职场文书
2015年驾驶员工作总结
2015/04/29 职场文书
欠条格式范本
2015/07/03 职场文书
SQL语句中JOIN的用法场景分析
2021/07/25 SQL Server
手把手教你导入Go语言第三方库
2021/08/04 Golang
总结高并发下Nginx性能如何优化
2021/11/01 Servers
Java 死锁解决方案
2022/05/11 Java/Android