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 相关文章推荐
判断及设置浏览器全屏模式
Apr 20 Javascript
jQuery中;function($,undefined) 前面的分号的用处
Dec 17 Javascript
jQuery实现新消息闪烁标题提示的方法
Mar 11 Javascript
javascript连续赋值问题
Jul 08 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
May 24 Javascript
JavaScript用JSONP跨域请求数据实例详解
Jan 06 Javascript
浅析vue数据绑定
Jan 17 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
Jan 22 Javascript
解决Layui 表单提交数据为空的问题
Aug 15 Javascript
详谈js的变量提升以及使用方法
Oct 06 Javascript
vue-router beforeEach跳转路由验证用户登录状态
Dec 26 Javascript
JavaScript获取某一天所在的星期
Sep 05 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获取金书网的书名的实现代码
2010/06/11 PHP
一些PHP Coding Tips(php小技巧)[2011/04/02最后更新]
2011/05/02 PHP
php实现webservice实例
2014/11/06 PHP
ThinkPHP2.x防范XSS跨站攻击的方法
2015/09/25 PHP
php中static 静态变量和普通变量的区别
2016/12/01 PHP
Laravel框架基于ajax实现二级联动功能示例
2019/01/17 PHP
js模拟hashtable的简单实例
2014/03/06 Javascript
JavaScript取得WEB安全颜色列表的方法
2015/07/14 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
2015/10/14 Javascript
浅析Bootstrap组件之面板组件
2016/05/04 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
2016/12/06 Javascript
js实现符合国情的日期插件详解
2017/01/19 Javascript
将 vue 生成的 js 上传到七牛的实例
2017/07/28 Javascript
理解javascript async的用法
2017/08/22 Javascript
微信小程序商品详情页规格属性选择示例代码
2017/10/30 Javascript
Vue作用域插槽slot-scope实例代码
2018/09/05 Javascript
利用原生JavaScript实现造日历轮子实例代码
2019/05/08 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
2020/08/19 Javascript
[01:21]2018DOTA2亚洲邀请赛4.5采访 打DOTA2也能有女朋友?
2018/04/06 DOTA
Python实现的txt文件去重功能示例
2018/07/07 Python
用python写一个定时提醒程序的实现代码
2019/07/22 Python
Python之变量类型和if判断方式
2020/05/05 Python
HTML5 canvas基本绘图之文字渲染
2016/06/27 HTML / CSS
T3官网:头发造型工具
2019/12/26 全球购物
.TTL是什么?有什么用处,通常那些工具会用到它?(ping? traceroute? ifconfig? netstat?)
2016/05/09 面试题
瀑布模型都有哪些优缺点
2014/06/23 面试题
架构师岗位职责
2013/11/18 职场文书
幼教个人求职信范文
2013/12/02 职场文书
研究生考核个人自我鉴定
2014/03/27 职场文书
团队精神的演讲稿
2014/05/14 职场文书
银行员工犯错检讨书
2014/09/16 职场文书
幼儿园教师的自我评价范文
2014/09/17 职场文书
2016年国庆节宣传标语
2015/11/25 职场文书
HTML基础详解(上)
2021/10/16 HTML / CSS
nginx之内存池的实现
2022/06/28 Servers