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 相关文章推荐
如何让浏览器支持jquery ajax load 前进、后退功能
Jun 12 Javascript
Linux下使用jq友好的打印JSON技巧分享
Nov 18 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
Jan 19 Javascript
javascript将数字转换整数金额大写的方法
Jan 27 Javascript
Javascript 字符串模板的简单实现
Feb 13 Javascript
jquery form表单获取内容以及绑定数据
Feb 24 Javascript
js 动态给元素添加、移除事件的实现方法
Jul 19 Javascript
React服务端渲染(总结)
Jul 01 Javascript
微信禁止下拉查看URL的处理方法
Sep 28 Javascript
玩转Koa之koa-router原理解析
Dec 29 Javascript
vue中axios请求的封装实例代码
Mar 23 Javascript
微信小程序开发摇一摇功能
Nov 22 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
CentOS6.5 编译安装lnmp环境
2014/12/21 PHP
PHP单例模式详细介绍
2015/07/01 PHP
PHP实现QQ登录实例代码
2016/01/14 PHP
PHP中文字符串截断无乱码解决方法
2016/10/10 PHP
PHP支付宝当面付2.0代码
2018/12/21 PHP
tp5.1 实现setInc字段自动加1
2019/10/18 PHP
Array.slice()与Array.splice()的返回值类型
2006/10/09 Javascript
JavaScript Prototype对象
2009/01/07 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
2011/12/11 Javascript
javascript常用对话框小集
2013/09/13 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
2015/04/17 Javascript
express如何解决ajax跨域访问session失效问题详解
2019/06/20 Javascript
独立部署小程序基于nodejs的服务器过程详解
2019/06/24 NodeJs
详解Python map函数及Python map()函数的用法
2017/11/16 Python
Python实现mysql数据库更新表数据接口的功能
2017/11/19 Python
Python中常见的异常总结
2018/02/20 Python
浅谈Python接口对json串的处理方法
2018/12/19 Python
浅析Python与Mongodb数据库之间的操作方法
2019/07/01 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
pandas DataFrame创建方法的方式
2019/08/02 Python
keras-siamese用自己的数据集实现详解
2020/06/10 Python
python+selenium+chrome实现淘宝购物车秒杀自动结算
2021/01/07 Python
HTML5 canvas 基本语法
2009/08/26 HTML / CSS
html5实现滑块功能之type=&quot;range&quot;属性
2020/02/18 HTML / CSS
美国存储和组织商店:The Container Store
2017/08/16 全球购物
goodhealth官方海外旗舰店:新西兰国民营养师
2017/12/15 全球购物
Saks Fifth Avenue澳洲/亚太地区:萨克斯第五大道精品百货店
2019/06/09 全球购物
英国123鲜花网站:123 Flowers
2019/07/07 全球购物
《桃林那间小木屋》教学反思
2014/05/01 职场文书
小学学校门卫岗位职责
2014/08/03 职场文书
中学学校门卫岗位职责
2014/08/15 职场文书
2014年残联工作总结
2014/11/21 职场文书
2014年度思想工作总结
2014/11/27 职场文书
面试通知邮件
2015/04/20 职场文书
用JS实现飞机大战小游戏
2021/06/09 Javascript
CSS 鼠标点击拖拽效果的实现代码
2022/12/24 HTML / CSS