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 相关文章推荐
改版了网上的一个js操作userdata
Apr 27 Javascript
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
Apr 15 Javascript
jquery调取json数据实现省市级联的方法
Jan 29 Javascript
jquery控制显示服务器生成的图片流
Aug 04 Javascript
js 判断一组日期是否是连续的简单实例
Jul 11 Javascript
vue.js指令v-model实现方法
Dec 05 Javascript
JavaScript中数组的各种操作的总结(必看篇)
Feb 13 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
Feb 27 Javascript
在使用JSON格式处理数据时应该注意的问题小结
May 20 Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
Jan 15 Javascript
在vue项目中promise解决回调地狱和并发请求的问题
Nov 09 Javascript
微信小程序实现左滑删除效果
Nov 18 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
hadoop常见错误以及处理方法详解
2013/06/19 PHP
PHP创建单例后台进程的方法示例
2017/05/23 PHP
php tpl模板引擎定义与使用示例
2019/08/09 PHP
PHP vsprintf()函数格式化字符串操作原理解析
2020/07/14 PHP
PhpStorm连接服务器并实现自动上传功能
2020/12/09 PHP
jquery 常用操作方法
2010/01/28 Javascript
使用js如何实现全选与全不选
2013/12/30 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
2015/12/30 Javascript
利用JS生成博文目录及CSS定制博客
2016/02/10 Javascript
jquery if条件语句的写法
2016/05/19 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
2016/06/12 Javascript
AngularJs Understanding the Model Component
2016/09/02 Javascript
js 判断附件后缀的简单实现方法
2016/10/11 Javascript
JS取数字小数点后两位或n位的简单方法
2016/10/24 Javascript
读Javascript高性能编程重点笔记
2016/12/21 Javascript
loading动画特效小结
2017/01/22 Javascript
微信小程序中实现一对多发消息详解及实例代码
2017/02/14 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
2017/07/23 Javascript
webpack构建react多页面应用详解
2017/09/15 Javascript
AngularJS 实现购物车全选反选功能
2017/10/24 Javascript
基于小程序请求接口wx.request封装的类axios请求
2020/07/02 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
2020/11/12 Javascript
vue 组件基础知识总结
2021/01/26 Vue.js
python从入门到精通(DAY 1)
2015/12/20 Python
django中账号密码验证登陆功能的实现方法
2019/07/15 Python
Python 之 Json序列化嵌套类方式
2020/02/27 Python
如何利用Python动态模拟太阳系运转
2020/09/04 Python
Python结合百度语音识别实现实时翻译软件的实现
2021/01/18 Python
HTML5有哪些新特征
2015/12/01 HTML / CSS
含精油的天然有机化妆品:Indemne
2019/08/27 全球购物
文化活动实施方案
2014/03/28 职场文书
户外拓展训练感想
2015/08/07 职场文书
2016北大自主招生自荐信模板
2016/01/28 职场文书
《弟子规》读后感:知廉耻、明是非、懂荣辱、辨善恶
2019/12/03 职场文书
使用这 6个Vue加载动画库来减少我们网站的跳出率
2021/05/18 Vue.js
gateway网关接口请求的校验方式
2021/07/15 Java/Android