vue 停止页面滚动_Vue关于滚动停止的监听方法

js没有提供页面滑动停止的方法,只有正在滚动的方法.所以需要自己专门写一个关于滚动停止的方法事例代码如下:

data() {

return { lastScroll:0,//记录上一次的滚动位置

timer:''//定时器

}

mounted() {

this.box =this.$refs.ct//可以滚动的UI控件

//监听UI控件的滚动,并记录每次滑动距离,每一次滚动就会启动一个延时执行的定时器,滚动停止之后就不会走滑动的回调方法,但是延时方法还会执行,

在延时方法会判断当前滑动位置和上一次滑动位置是否相等,如果相等,则是滚动停止了,为了避免多个定时器,每次滑动的时候都会销毁上次滑动回调生成的定时器

this.box.addEventListener('scroll', () => {

clearTimeout(this.timer)

this.timer =null; this.lastScroll =this.$refs.ct.scrollTop;

//开始滑动

console.log('beginScroll');

this.$emit('beginScroll')

this.timer =setTimeout( ()=> {

if(this.lastScroll ==this.$refs.ct.scrollTop ){

//停止滑动

this.$emit('endScroll')

console.log('endScroll');

}

},100)

}, false)

vue 停止页面滚动_Vue关于滚动停止的监听方法相关推荐

安卓Android绘制一个信息填写页面，使用了三种事件监听方法
先上效果图片: 第一种,匿名内部类 //设置提交按钮监听submitButton.setOnClickListener(new View.OnClickListener() {@Overridepub ...
对页面上所有ajax的请求进行监听
这段时间遇到个问题,就是需要对页面中的所有ajax请求进行监听,因为页面中涉及了很多的subapp,是不同人做的,我没有办法在他们那里进行监听,只能在一个大家都调用的文件里面写监听,我首先想到了jQu ...
vue watch 修改滚动条_vue实现滚动监听，点击瞄点平滑滚动，控制内嵌滚动条滚动...
滚动效果当页面滑动时,左边导航栏会自动定位到当前标题,一级标题展开,二级标题的字体变红色,字体前面有一个小图标. 上图........... Html代码 {{NItem1.ordered}} {{ ...
vue 公用页面引用_vue中实现部分页面引入公共组件
前言我们可以把公共组件放到App.vue中,但是有时候我们希望某个页面不需要这写公共部分,那么需要怎么设置呢? 本文为大家介绍三种部分页面引入公共组件的方法. 方法一:利用子路由创建一个layou ...
vue 删除页面缓存_vue项目强制清除页面缓存的例子
异常描述: 支付宝中内嵌h5项目(vue框架开发),前端重新打包上传之后访问页面会导致页面空白.页面tab点击异常之类异常情况,需要手动清除支付宝缓存才可以正常访问. 解决方案: 在HTTP协议中,只 ...
vue watch 经常监听不到_Vue.js中 watch(深度监听)的最易懂的解释
FullName: {{fullName}} FirstName: newVue({ el:'#root', data: { firstName:'Dawei', lastName:'Lou', fu ...
前端学习（2014）vue之电商管理系统电商系统之监听on-remove事件
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
前端学习（2013）vue之电商管理系统电商系统之监听on-success事件
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
手机影音第六天自定义播放器页面的实现（按钮暂时未监听）
目前进度的项目源代码托管在里码云上,地址如下: https://git.oschina.net/joy_yuan/MobilePlayer 感兴趣的可以去下载看看,多多支持这次就摒弃了系统自带的控制 ...
Android下 scrollview的滚动停止事件的监听方法
2019独角兽企业重金招聘Python工程师标准>>> 使用递归调用的方法,每隔5毫秒检查一下是否已经停止,如果已经停止,就拿到事件啦! 不扯蛋,直接上代码. scrollConte ...

vue 停止页面滚动_Vue关于滚动停止的监听方法

vue 停止页面滚动_Vue关于滚动停止的监听方法相关推荐

最新文章

热门文章