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


Posted in Javascript onOctober 15, 2019

本文实例讲述了vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法。分享给大家供大家参考,具体如下:

在网上看了一下vue中监听滚动条滚动事件,清一色的使用document.addEventListener('scroll',function(){})

我是在做滚动条滑到底部时,自动加载更多的时候有这个需求。

我认为使用document.addEventListener会破坏vue的统一性,对我这种有轻微代码强迫症的人来说,让我感觉很不爽。而且这种做法,会让你更加难以判断是否滑动到底部了,特别是当你并不是整页滚动,而是页面中拥有一个fixed固定的头部时。

在.vue的组件中

<template>
 <div class="body-container" @scroll="scrollEvent">
 <ul>
 <li></li>
 ……
 <li></li>
 </ul>
 </div>
<template>
export default {
 name: 'demo',
 data () {
  return {
  msg: '',
  }
 },
 methods: {
  scrollEvent(e){
  console.log(e)
  },
 }
}

照上面的写法,我发现即使我的li标签足够多,撑满一页,页面滚动的时候并不能触发到scrollEvent,是什么原因呢?

经过仔细思考,猜想应该是滚动事件并不是在我<div class="body-container" @scroll="scrollEvent">这个div上触发的,因为滚动条并没有出现在我这个div上。这个div完全被li标签撑起来了,产生滚动事件的就是document了。

于是做了一个小试验,定义一个固定高度的div

<div style="height: 300px" @scroll="scrollEvent">
 <div style="height: 200px"></div>
 <div style="height: 200px"></div>
 <div style="height: 200px"></div>
</div>

当我在这个300px固定高度的div中滚动的时候,果然触发了scrollEvent,问题原因找到了,接下来就是解决了。

只要我能让<div class="body-container" @scroll="scrollEvent">拥有固定高度,就能触发滚动事件了。

但是固定高度怎么给呢,各个厂商的手机屏幕高度都是不一样的,总不能让某些手机显示不完全,或者底部留空白吧。

当然后办法啦!就是吧html,body,.body-container{height:100%}这样,我的.body-container就能继承到document的高度了;

还有另一个办法,让.body-container使用fixed定位

.body-container{
 position: fixed;
 top:6rem;
 left: 0;
 right:0;
 bottom: 0;
 overflow: auto
}

因为上下左右的位置都固定了,所以div自然也就有了固定高度,此方法适用于页面有一个固定高度的头部导航,我项目中有一个6rem高的头部导航,所以我采用了fixed定位。

接下来就是验证是否滑到了底部

export default {
 name: 'demo',
 data () {
  return {
  msg: '',
  }
 },
 methods: {
  scroll(e){
  //滚动的像素+容器的高度>可滚动的总高度-100像素
  if(e.srcElement.scrollTop+e.srcElement.offsetHeight>e.srcElement.scrollHeight-100){
   this.loadMore(); //加载更多
  }
  },
 }
}

这样就能比较清晰的判断是否滚动到了底部。但是如果仅仅这样写,当滚动到底部100px内时,会触发很多次加载更多,所以我们需要增加一些判断条件

methods: {
  scroll(e){
  // !this.moreLoading 没有在加载状态,触发加载更多时,把this.moreLoading置未true
  // !this.noMore 没有更多的状态为false,当我们取到的数据长度小于1页的数量时,就没有更多了数据了,把 this.noMore置为true,这样就不会触发无意义的加载更多了
  if(e.srcElement.scrollTop+e.srcElement.offsetHeight>e.srcElement.scrollHeight-100 && !this.moreLoading && !this.noMore){
   this.loadMore();
  }
  },
 }

至此,功能完美的实现了,而且没有使用document.addEventListener破坏vue的完整性,感觉自己棒棒哒!

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
jquery 与NVelocity 产生冲突的解决方法
Jun 13 Javascript
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
Jul 26 Javascript
jquery实现div拖拽宽度示例代码
Jul 31 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
May 23 Javascript
jQuery+AJAX实现网页无刷新上传
Feb 22 Javascript
JQuery创建DOM节点的方法
Jun 11 Javascript
javascript图片预加载实例分析
Jul 16 Javascript
js判断图片加载完成后获取图片实际宽高的方法
Feb 25 Javascript
javascript中的 object 和 function小结
Aug 14 Javascript
AnjularJS中$scope和$rootScope的区别小结
Sep 18 Javascript
在javaScript中检测数据类型的几种方式小结
Mar 04 Javascript
Vue.2.0.5过渡效果使用技巧
Mar 16 Javascript
vue实现树形结构样式和功能的实例代码
Oct 15 #Javascript
谈谈IntersectionObserver懒加载的具体使用
Oct 15 #Javascript
js实现开关灯效果
Mar 30 #Javascript
JS实现灯泡开关特效
Mar 30 #Javascript
浅谈微信小程序列表埋点曝光指南
Oct 15 #Javascript
javascript网页随机点名实现过程解析
Oct 15 #Javascript
javascript随机变色实例代码
Oct 15 #Javascript
You might like
组合算法的PHP解答方法
2012/02/04 PHP
有关PHP中MVC的开发经验分享
2012/05/17 PHP
PHP Echo字符串的连接格式
2016/03/07 PHP
PHP自定义图片缩放函数实现等比例不失真缩放的方法
2016/08/19 PHP
thinkPHP框架中执行事务的方法示例
2018/05/31 PHP
js限制文本框为整数和货币的函数代码
2010/10/13 Javascript
关于jquery.validate1.9.0前台验证的使用介绍
2013/04/26 Javascript
javascript实现的DES加密示例
2013/10/30 Javascript
javascript验证邮件地址和MX记录的方法
2015/06/16 Javascript
iframe中子父类窗口调用JS的方法及注意事项
2015/08/25 Javascript
解析浏览器端的AJAX缓存机制
2016/06/21 Javascript
利用css+原生js制作简单的钟表
2020/04/07 Javascript
AngularJS 依赖注入详解及示例代码
2016/08/17 Javascript
微信小程序图表插件(wx-charts)实例代码
2017/01/17 Javascript
Vue.js原理分析之observer模块详解
2017/02/17 Javascript
Node.js+Express+MySql实现用户登录注册功能
2017/07/10 Javascript
使用vue实现HTML页面生成图片的方法
2020/03/12 Javascript
详解ES6实现类的私有变量的几种写法
2021/02/10 Javascript
python下如何让web元素的生成更简单的分析
2008/07/17 Python
python使用win32com库播放mp3文件的方法
2015/05/30 Python
python利用正则表达式提取字符串
2016/12/08 Python
浅谈Python用QQ邮箱发送邮件时授权码的问题
2018/01/29 Python
解决python写入mysql中datetime类型遇到的问题
2018/06/21 Python
PyCharm+PySpark远程调试的环境配置的方法
2018/11/29 Python
python使用xlrd模块读取xlsx文件中的ip方法
2019/01/11 Python
Django中密码的加密、验密、解密操作
2019/12/19 Python
美国独家设计师眼镜在线光学商店:Glasses Gallery
2017/12/28 全球购物
香港现代设计家具品牌:Ziinlife Furniture
2018/11/13 全球购物
华为的Java面试题
2014/03/07 面试题
会计专业推荐信
2013/10/29 职场文书
计算机毕业大学生推荐信
2013/12/01 职场文书
幼儿园中班上学期评语
2014/04/18 职场文书
大学迎新生欢迎词
2015/09/29 职场文书
初中语文教学研修日志
2015/11/13 职场文书
草系十大最强宝可梦,纸片人上榜,榜首大家最熟悉
2022/03/18 日漫
SQL Server中的游标介绍
2022/05/20 SQL Server