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 相关文章推荐
JavaScript 实现??打印?理
Apr 28 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
May 28 Javascript
一个简单的瀑布流效果(主体形式自写)
May 27 Javascript
输入框过滤非数字的js代码
Sep 18 Javascript
jQuery实现瀑布流的取巧做法分享
Jan 12 Javascript
JS组件Bootstrap Table使用方法详解
Feb 02 Javascript
BootStrap tooltip提示框使用小结
Oct 26 Javascript
jQuery基本选择器和层次选择器学习使用
Feb 27 Javascript
详解在Vue中通过自定义指令获取dom元素
Mar 04 Javascript
JavaScript使用FileReader实现图片上传预览效果
Mar 27 Javascript
基于Vuejs的搜索匹配功能实现方法
Mar 03 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
造势之举?韩国总统候选人发布《星际争霸》地图
2017/04/22 星际争霸
php中数据的批量导入(csv文件)
2006/10/09 PHP
thinkphp Apache配置重启Apache1 restart 出错解决办法
2017/02/15 PHP
PHP数组遍历的几种常见方式总结
2019/02/15 PHP
TNC vs BOOM BO3 第三场2.13
2021/03/10 DOTA
Jquery ui css framework
2010/06/28 Javascript
datagrid框架的删除添加与修改
2013/04/08 Javascript
js arguments,jcallee caller用法总结
2013/11/30 Javascript
有趣的bootstrap走动进度条
2016/12/01 Javascript
JS实现数组去重方法总结(六种方法)
2017/07/14 Javascript
浅谈Angular路由复用策略
2017/10/04 Javascript
vue项目移动端实现ip输入框问题
2019/03/19 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
2019/08/08 Javascript
javascript实现京东快递单号的查询效果
2020/11/30 Javascript
Python def函数的定义、使用及参数传递实现代码
2014/08/10 Python
在Python的web框架中中编写日志列表的教程
2015/04/30 Python
python selenium 对浏览器标签页进行关闭和切换的方法
2018/05/21 Python
Python 3.x 判断 dict 是否包含某键值的实例讲解
2018/07/06 Python
基于树莓派的语音对话机器人
2019/06/17 Python
python async with和async for的使用
2019/06/20 Python
python tkinter组件摆放方式详解
2019/09/16 Python
用python的turtle模块实现给女票画个小心心
2019/11/23 Python
python标识符命名规范原理解析
2020/01/10 Python
Python3标准库之functools管理函数的工具详解
2020/02/27 Python
纯css3实现鼠标经过图片显示描述的动画效果
2014/09/01 HTML / CSS
Nike英国官网:Nike.com (UK)
2017/02/13 全球购物
全球性的女装店:storets
2019/06/12 全球购物
爱尔兰旅游网站:ebookers.ie
2020/01/24 全球购物
亲子拓展活动方案
2014/02/20 职场文书
热情服务标语
2014/10/07 职场文书
市贸粮局召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
法律讲堂观后感
2015/06/11 职场文书
会计实训总结范文
2015/08/03 职场文书
Nginx反爬虫策略,防止UA抓取网站
2021/03/31 Servers
Vue实现跑马灯样式文字横向滚动
2021/11/23 Vue.js
总结三种用 Python 作为小程序后端的方式
2022/05/02 Python