首先需要明确3个定义:

文档高度:整个页面的高度

可视窗口高度:你看到的浏览器可视屏幕高度

滚动条滚动高度: 滚动条下滑过的高度

当 文档高度 = 可视窗口高度 + 滚动条高度  时,滚动条正好到底。

首先在mounted中添加监听:window.addEventListener('scroll', this.scrollFn);   // 监听scroll

然后创建3个函数分别获取文档高度、可视窗口高度、滚动条高度:

//文档高度

getScrollTop(){
var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
  if(document.body){
    bodyScrollTop = document.body.scrollTop;
  }
  if(document.documentElement){
    documentScrollTop = document.documentElement.scrollTop;
  }
  scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
  return scrollTop;
}
 
//可视窗口高度
 
getWindowHeight(){
var windowHeight = 0;
  if(document.compatMode == "CSS1Compat"){
    windowHeight = document.documentElement.clientHeight;
  }else{
    windowHeight = document.body.clientHeight;
  }
  return windowHeight;
}
 
//滚动条高度
 
getScrollHeight(){
var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
  if(document.body){
    bodyScrollHeight = document.body.scrollHeight;
  }
  if(document.documentElement){
    documentScrollHeight = document.documentElement.scrollHeight;
  }
  scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
  return scrollHeight;
}
 
然后在scrollFn函数中判断:
 
scrollFn(){
  if(this.getScrollTop() + this.getWindowHeight() == this.getScrollHeight()){
    这里执行动态获取数据的函数
  }
}
 
最后记得销毁监听:
destroyed() {
  window.removeEventListener('scroll', this.scrollFn); // 销毁监听
}
 
如此即可实现滑动加载更多。

如何在vue中监听scroll,从而实现滑动加载更多的更多相关文章

  1. 在vue中监听storage的变化

    1.首先在main.js中给Vue.protorype注册一个全局方法,其中,我们约定好了想要监听的sessionStorage的key值为’watchStorage’,然后创建一个StorageEv ...

  2. vue中页面卡顿,使用懒加载

    为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题. 懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载. 常用的懒加载方式有两种:即使用vue异步组件 和 ES中的imp ...

  3. vue+better-scroll 下拉刷新,上拉加载更多

    better-scroll 来做下拉刷新和 上拉加载 特别方便.  安装好vue脚手架和better-scroll 之后 直接复制粘贴就可以看到效果了 <template> <div ...

  4. vue中监听页面滚动和监听某元素滚动

    ①监听页面滚动 在生命周期mounted中进行监听滚动: mounted () { window.addEventListener('scroll', this.scrollToTop) }, 在方法 ...

  5. vue中监听window.resize的变化

    我只想说每个人遇到的bug真的不能一概而论,解决办法也会有不同.在vue中使用echarts的时候,会想要实现window.resize窗体变化大小的时候让图形大小跟着变化.实现的过程中各种bug,也 ...

  6. vue中监听路由参数的变化

    在vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,期望达到数据的更新. mounted: () =>{ this.id = this.$route.query.id; this. ...

  7. vue中监听返回键

    问题:在项目中,我们常常有需求,当用户在填写表单时,点击返回的时候,我们希望加一个弹窗,确认离开吗,确认将保存为草稿 解决方案:利用 H5的 pushstate(个人理解为增加页面栈)特性与onpop ...

  8. vue 中监听页面滚动

    监听页面滚动 在methods中定义一个方法 handleScroll() { //获取滚动时的高度 let scrollTop = window.pageYOffset || document.do ...

  9. vue中监听路由参数变化

    今天遇到一个这样的业务场景:在同一个路由下,只改变路由后面的参数值, 比如在这个页面  /aaa?id=1 ,在这个页面中点击一个按钮后 跳转到 /aaa?id=2 , 但从“/aaa?id=1”到“ ...

随机推荐

  1. TP5.0中使用trace调试

    1.在项目 的配置文件config.php 配置, 2.在程序中使用trace: 3.在浏览器网页上打开 得到如下图所示:点击 “用户变量”,即可查看使用trace输出的变量 或者我们使用 trace ...

  2. 一个Demo让你掌握Android所有控件

    原文:一个Demo让你掌握Android所有控件 本文是转载收藏,侵删,出处:"安卓巴士"      下面给出实现各个组件的源代码: 1.下拉框实现--Spinner packag ...

  3. 修改GitHub上项目语言显示

    问题 最近将自己以Scala为主语言写的博客放到github上了.由于使用了富文本编辑器.jQuery.Bootstrap等第三方插件,导致js.css等代码远远超过你自己写的代码. 于是也就成这样了 ...

  4. Bamboo 0.2.11 发布,HAProxy 自动配置

    Bamboo 0.2.11 发布,此版本更新内容如下: 新特性 提供更多的模板字符串函数:strings.Split,  strings.Join,strings.Replace, strings.T ...

  5. XP系統IIS最大連接數修改

    方法一: 安裝軟件 http://download.microsoft.com/download/iis50/Utility/5.0/NT45/EN-US/MtaEdt22.exe 然後進入  W3S ...

  6. Hadoop集群(第6期)JDK和SSH无密码配置

    1.Linux配置java环境变量 1.1 解压安装jdk 在shell终端下进入jdk-6u14-linux-i586.bin文件所在目录,执行命令 ./jdk-6u14-linux-i586.bi ...

  7. linux如何直接运行python文件

    1.首先创建好py文件 touch GetCiscoCpu.py 2. 编写GetCiscoCpu.py vi GetCiscoCpu.py /********************** *本文是用 ...

  8. ORACLE(student)表习题与答案

    因为答案都是小编自己写的,解法可能有多种,如果您觉得我的解法有误,希望您有时间给我留言. 题目:1. 查询student表中的所有记录的sname.ssex和class列. SELECT sname, ...

  9. SpringBoot启动访问JSP页面,直接进入页面或者访问不到,报404,并且加载tomcat插件tomcat-embed-jasper也不行

    这个问题花费了两天的时间,解决路径: 我用的是SpringBoot1.5.2,SpringMVC和Spring,tomcat启动插件都是默认的版本,Spring是4.3.7,jdk是1.7.0_80, ...

  10. spring 5.x 系列第10篇 —— 整合mongodb (代码配置方式)

    源码Gitub地址:https://github.com/heibaiying/spring-samples-for-all 一.说明 1.1 项目结构说明 配置文件位于com.heibaiying. ...