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 相关文章推荐
bgsound 背景音乐 的一些常用方法及特殊用法小结
May 11 Javascript
获取dom元素那些讨厌的位置封装代码
Jun 23 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
May 07 Javascript
jQuery中;function($,undefined) 前面的分号的用处
Dec 17 Javascript
js实现仿QQ秀换装效果的方法
Mar 04 Javascript
javascript事件模型介绍
May 31 Javascript
js选择器全面解析
Jun 27 Javascript
详解angular2封装material2对话框组件
Mar 03 Javascript
angularJS深拷贝详解
Mar 23 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
Mar 25 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
Jun 25 Javascript
对angular 监控数据模型变化的事件方法$watch详解
Oct 09 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
文章推荐系统(三)
2006/10/09 PHP
PHP中冒号、endif、endwhile、endfor使用介绍
2010/04/28 PHP
CI框架中通过hook的方式实现简单的权限控制
2015/01/07 PHP
一个简单安全的PHP验证码类 附调用方法
2016/06/24 PHP
js 字符串操作函数
2009/07/25 Javascript
javascript学习笔记(五)正则表达式
2011/04/08 Javascript
javascript在myeclipse中报错的解决方法
2013/10/29 Javascript
document.execCommand()的用法小结
2014/01/08 Javascript
jquery预加载图片的方法
2015/05/27 Javascript
AngularJS初始化静态模板详解
2016/01/14 Javascript
浅谈javascript中的call、apply、bind
2016/03/06 Javascript
javascript类型系统——undefined和null全面了解
2016/07/13 Javascript
原生js实现tab选项卡切换
2020/03/23 Javascript
JS验证input输入框(字母,数字,符号,中文)
2017/03/23 Javascript
浅谈Angular单元测试总结
2019/03/22 Javascript
深入解析Python中的descriptor描述器的作用及用法
2016/06/27 Python
python绘制直线的方法
2018/06/30 Python
Python实现的爬取豆瓣电影信息功能案例
2019/09/15 Python
Python并发爬虫常用实现方法解析
2020/11/19 Python
HTML5实现的震撼3D焦点图动画的示例代码
2019/09/26 HTML / CSS
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
2013/06/06 HTML / CSS
英国标志性奢侈品牌:Burberry
2016/07/28 全球购物
Exoticca英国:以最优惠的价格提供豪华异国情调旅行
2018/10/18 全球购物
英国领先的在线旅游和休闲零售商:lastminute.com
2019/01/23 全球购物
工业自动化专业毕业生推荐信
2013/11/18 职场文书
英文自我鉴定
2013/12/10 职场文书
卫校中专生的自我评价
2014/01/15 职场文书
人事专员岗位职责说明书
2014/07/30 职场文书
学校四风问题对照检查材料思想汇报
2014/09/26 职场文书
家长高考寄语
2015/02/27 职场文书
护士求职自荐信
2015/03/25 职场文书
2015年城管个人工作总结范文
2015/04/20 职场文书
2015年语文教师工作总结
2015/05/25 职场文书
秋菊打官司观后感
2015/06/03 职场文书
高中同学会致辞
2015/08/01 职场文书
react如何快速设置文件路径别名
2021/04/28 Javascript