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

本文实例为大家分享了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去掉即可；或者给父级撑满屏幕；

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue实现回到顶部和底部动画效果

    Vue实现回到顶部和底部动画效果

    本文实例为大家分享了Vue实现回到顶部和底部动画效果的具体代码,供大家参考,具体内容如下 代码: <template> <div> <div class="scroll" :class="{show:isActive}"> <div id="toTop" @click="toTop(step)"><</div> <div id="toBottom

  • vue router 跳转后回到顶部的实例

    在main.js中加上这段代码 // 跳转后返回顶部 router.afterEach((to,from,next) => { window.scrollTo(0,0); }) 以上这篇vue router 跳转后回到顶部的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • vue.js实现回到顶部动画效果

    最近使用vue.js做了几个页面,其中有一个回到顶部的动画效果记录下. html如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>回到顶部</title> <META HTTP-EQUIV="pragma" CONTENT="no-cache"> <META HTTP-EQUIV=

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

    本文实例为大家分享了vue回到顶部监听滚动事件,供大家参考,具体内容如下 鼠标滚到到页面中间出现的工具浮框 <template> <div class="tools"> <ul @mouseleave="mouseLeave()"> <li @click="toTop(step)">回到顶部</li> <li @mouseover="mouseOver(1)"&

  • vue使用@scroll监听滚动事件时，@scroll无效问题的解决方法详解

    本文实例讲述了vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法.分享给大家供大家参考,具体如下: 在网上看了一下vue中监听滚动条滚动事件,清一色的使用document.addEventListener('scroll',function(){}) 我是在做滚动条滑到底部时,自动加载更多的时候有这个需求. 我认为使用document.addEventListener会破坏vue的统一性,对我这种有轻微代码强迫症的人来说,让我感觉很不爽.而且这种做法,会让你更加难以判断是否

  • 基于vue监听滚动事件实现锚点链接平滑滚动的方法

    基于vue监听滚动事件实现锚点链接平滑滚动的方法

    基于vue监听滚动事件,实现锚点链接平滑滚动 近日在做一个vue项目的餐饮模块,小编需要实现一个菜单列表显示的功能(如图所示:左边为菜单类别,右边显示相对应的菜品) 小编将此分为三个功能模块来实现(本来一张动画就清晰明了,小编太笨,只得口述一下): 1.左边点击类别,右边显示相应类别的菜品列表(平滑滚动) 2.滚动右边的滚动条,左边对应的显示当前样式 3.若从别的页面点击菜品进来该页面,则该菜品为指定效果 小编也是vue的初学者,在阅读了大量的文章后,其中借鉴http://www.jb51.ne

  • Vue.js实战之通过监听滚动事件实现动态锚点

    Vue.js实战之通过监听滚动事件实现动态锚点

    前言 前几天工作中在做项目的时候,需要实现一个动态锚点的效果,具体效果如下: 如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 animate() 方法的情况下,如何实现平滑滚动? 2. 如何监听页面滚动事件? 在浏览了大量文章.进行多次尝试之后,终于解决了这些问题 期间主要涉及到了 setTimeout 的递归用法,和 Vue 生命周期中的 mounted 一.锚点实现 在实现平滑滚动之前,得先确保基本的锚点功能 如果没有其他要求,直接用

  • vue实现某元素吸顶或固定位置显示（监听滚动事件）

    vue实现某元素吸顶或固定位置显示（监听滚动事件）

    最近写了一个VUE的web app项目,需要实现某个部位吸顶的效果.即,页面往上滑动,刚好到达该部位时,该部分,固定在顶部显示. 1.监听滚动事件 利用VUE写一个在控制台打印当前的scrollTop, 首先,在mounted钩子中给window添加一个滚动滚动监听事件, mounted () { window.addEventListener('scroll', this.handleScroll) }, 然后在方法中,添加这个handleScroll方法 handleScroll () {

  • vue监听滚动事件的方法

    vue中监听滚动事件,然后对其进行事件处理,一般有:1. 滚动到顶部吸附: 2. 根据滚动的位置激活对应的tab键(锚链接tab键) 这两种方式的处理都是可通过监听scroll来实现 mounted(){ window.addEventListener('scroll',this.handleScroll) // 监听滚动事件,然后用handleScroll这个方法进行相应的处理 } 处理方法 1. 滚动到顶部吸附 html元素 <!--如果isFixed为true的话,就添加class is_

  • vue监听滚动事件实现滚动监听

    在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="https://unpkg

  • Vue之监听方法案例详解

    vue中的监听方法 watch 注意 名字 你想监听哪个属性,就要和他起一样的名字 1.作用 用来监听vue实例中的数据变化 可以随时修改状态的变化 2.触发条件 当你监听的属性发生变化时,会自动调用对应的监听方法 3.使用场景 用于异步处理,开销比较大的运算 4.示例 watch:{ name(newvalue,oldvalue){ //计算属性可以接受两个参数,第一个参数是新的属性值,第二参数是老的属性值 // this.age // console.log('name属性发生变化了') c

  • Spring事件监听机制观察者模式详解

    目录 前言 观察者模式 观察者的角色定义 Java中的事件机制 Spring中的事件机制 Spring事件监听案例 小结 前言 Spring中提供了一套默认的事件监听机制,在容器初始化时便使用了这套机制.同时,Spring也提供了事件监听机制的接口扩展能力,开发者基于此可快速实现自定义的事件监听功能. Spring的事件监听机制是在JDK事件监听的基础上进行的扩展,也是在典型观察者模式上的进一步抽象和改进.所以,结合Spring的事件监听机制与观察者模式来学习,可以达到理论与实践的完美融合. 本

  • Android 滑动监听的实例详解

    Android 滑动监听的实例详解

    Android 滑动监听的实例详解 摘要: ScollBy,ScollTo是对内容的移动,view.ScollyBy是对view的内容的移动 view,ScollTo是对内容的移动(移动到指定位置),view.ScollyBy是对view的内容的移动(移动距离) 在次activity中,当手指点击TextView ,此时是ViewGroup 响应还是TextView响应呢? 代码实践: 在activity中重写onTouchEvent(): public boolean onTouchEvent

随机推荐