新西兰服务器

vue中如何监听回到顶部滚动事件


vue中如何监听回到顶部滚动事件

发布时间:2022-04-21 16:56:48 来源:高防服务器网 阅读:87 作者:iii 栏目:大数据

这篇文章主要讲解了“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去掉即可;或者给父级撑满屏幕。

感谢各位的阅读,以上就是“vue中如何监听回到顶部滚动事件”的内容了,经过本文的学习后,相信大家对vue中如何监听回到顶部滚动事件这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是高防服务器网,小编将为大家推送更多相关知识点的文章,欢迎关注!

[微信提示:高防服务器能助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

[图文来源于网络,不代表本站立场,如有侵权,请联系高防服务器网删除]
[