vue监听滚动开始与结束

data{
oldScrollTop: 0, //记录上一次滚动结束后的滚动距离
scrollTop: 0 ,// 记录当前的滚动距离
}

watch: {scrollTop(newValue, oldValue) {setTimeout(() => {if(newValue == window.scrollY) { //延时执行后当newValue等于window.scrollY，代表滚动结束console.log('滚动结束');this.oldScrollTop = newValue; //每次滚动结束后都要给oldScrollTop赋值this.tran_flag=true;};}, 200); //必须使用延时器，否则每次newValue和window.scrollY都相等，无法判断，20ms刚好大于watch的侦听周期，故延时20msif(this.oldScrollTop == oldValue) { //每次滚动开始时oldScrollTop与oldValue相等console.log('滚动开始');this.tran_flag=false;}}},

methods: {handleScroll() {window.addEventListener('scroll', () => {this.scrollTop = window.scrollY;})},}

beforeDestroy() {window.removeEventListener('scroll',() => {this.scrollTop = window.scrollY;}); //离开当前组件别忘记移除事件监听哦}

vue监听滚动开始与结束相关推荐

vue监听滚动事件，实现滚动监听
在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en">& ...
vue监听滚动事件实现某元素吸顶或者固定位置显示
vue监听滚动事件实现某元素吸顶或者固定位置显示最近写了一个VUE的web app项目,需要实现某个部位吸顶的效果.即,页面往上滑动,刚好到达该部位时,该部分,固定在顶部显示. 1.监听滚动事件 ...
vue 监听滚动事件之菜单滚动吸顶点击滑动到指定位置点击高亮
###菜单滚动吸顶效果: ###html: <section class="switchModule" id="switchModule">< ...
vue监听滚动到底部加载更多
整理之前做过的一个vue滚动到底部的加载显示更多功能,后台已经分好了页就剩前端渲染主要参数pageSize 每页数量(这里默认10) pageNum 页数,能用代码说的就不吹泡泡了直接上代码: 一. ...
vue 监听页面滚动事件：触发animate.min.css动画特效
一.问题答疑: 1. animate.css 如何在vue项目中引入?或引用? 2. 如何监听滚动事件,触发animate.class动画播放? vue 监听滚轮滚动事件,for循环 ,动态id,代码 ...
Vue 设置overflow: auto 后监听滚动距离
overflow: auto 后监听滚动距离 <div class="page-body-inner" @scroll.passive="getScroll($ev ...
vue 监听div滚动事件
使用场景,列表下拉刷新数据: <div class="table-box" @scroll="divscrollFn($event)"> </ ...
vue监听页面滚动事件
方法:监听滚动实现通过addEventListener方式监听通过scroll获取到滚动 export default {data () {return {topNavBg: {backgroun ...
页面滚动到某一位置吸顶_vue监听滚动事件某元素吸顶或固定位置显示详解
本文主要为大家详细介绍了vue实现某元素吸顶或固定位置显示,监听滚动事件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 最近写了一个VUE的web app项目,需要实现某个部位 ...

vue监听滚动开始与结束

vue监听滚动开始与结束相关推荐

最新文章

热门文章