vue 纯js监听滚动条到底部的实例讲解


Posted in Javascript onSeptember 03, 2018

在网页中,我们会遇到很多在滚动条到底部的时候有数据正在加载的事件,那么怎样用vue去实现这样的内容呢?本篇只给出一个雏形,结合vue的生命周期用纯javascript写的一个监听函数,后续操作数据库的部分暂且不议。

1、怎样用纯js判断滚动条是否到底部?

先了解几个关键词:

(1)滚动条到顶部的位置:scrollTop

(2)当前窗口内容可视区:windowHeight

(3)滚动条内容的总高度:scrollHeight

触发监听的函数是:

window.onscroll = function(){...}

判断到底部的等式: scrollTop+windowHeight=scrollHeight;

2、主要函数代码

created(){
 window.onscroll = function(){
 //变量scrollTop是滚动条滚动时,距离顶部的距离
 var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
 //变量windowHeight是可视区的高度
 var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
 //变量scrollHeight是滚动条的总高度
 var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
    //滚动条到底部的条件
    if(scrollTop+windowHeight==scrollHeight){
    //写后台加载数据的函数
   console.log("距顶部"+scrollTop+"可视区高度"+windowHeight+"滚动条总高度"+scrollHeight);
    } 
  }
 }

以上这篇vue 纯js监听滚动条到底部的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ppk谈JavaScript style属性
Oct 10 Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
Jun 09 Javascript
浅析document.ready和window.onload的区别讲解
Dec 18 Javascript
js控制文本框只输入数字和小数点的方法
Mar 10 Javascript
jquery实现简单的自动播放幻灯片效果
Jun 13 Javascript
Jquery获取第一个子元素简单实例
Jun 02 Javascript
微信小程序实战之自定义toast(6)
Apr 18 Javascript
如何理解Vue的render函数的具体用法
Aug 30 Javascript
Vue实例的对象参数options的几个常用选项详解
Nov 08 Javascript
Vue引入Stylus知识点总结
Jan 16 Javascript
bootstrap-paginator服务器端分页使用方法详解
Feb 13 Javascript
Vue切换Tab动态渲染组件的操作
Sep 21 Javascript
解决vue.js this.$router.push无效的问题
Sep 03 #Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
Sep 03 #Javascript
基于vue-router 多级路由redirect 重定向的问题
Sep 03 #Javascript
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 #jQuery
Vue-router的使用和出现空白页,路由对象属性详解
Sep 03 #Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
Sep 03 #Javascript
JavaScript日期工具类DateUtils定义与用法示例
Sep 03 #Javascript
You might like
不用数据库的多用户文件自由上传投票系统(1)
2006/10/09 PHP
php5中date()得出的时间为什么不是当前时间的解决方法
2008/06/30 PHP
PHP 5.3.0 安装分析心得
2009/08/07 PHP
用js进行url编码后用php反解以及用php实现js的escape功能函数总结
2010/02/08 PHP
Thinkphp中import的几个用法详细介绍
2014/07/02 PHP
ThinkPHP模版中导入CSS和JS文件的方法
2014/11/29 PHP
javascript 实现父窗口引用弹出窗口的值的脚本
2007/08/07 Javascript
jquery 选项卡效果 新手代码
2011/07/08 Javascript
获取select元素被选中的文本内容的js代码
2014/01/29 Javascript
jQuery实现拖拽效果插件的方法
2015/03/23 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
2016/12/25 Javascript
详解vue事件对象、冒泡、阻止默认行为
2017/03/20 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
2017/04/03 jQuery
JavaScript实现实时更新系统时间的实例代码
2017/04/04 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
2017/08/03 Javascript
Node层模拟实现multipart表单的文件上传示例
2018/01/02 Javascript
Webpack设置环境变量的一些误区详解
2019/12/19 Javascript
python中readline判断文件读取结束的方法
2014/11/08 Python
Python找出list中最常出现元素的方法
2016/06/14 Python
Python实现改变与矩形橡胶的线条的颜色代码示例
2018/01/05 Python
pandas object格式转float64格式的方法
2018/04/10 Python
django框架model orM使用字典作为参数,保存数据的方法分析
2019/06/24 Python
pytorch中如何使用DataLoader对数据集进行批处理的方法
2019/08/06 Python
python将字符串转变成dict格式的实现
2019/11/18 Python
利用setuptools打包python程序的方法步骤
2020/01/18 Python
用python写PDF转换器的实现
2020/10/29 Python
瑞典廉价机票预订网站:Seat24
2018/06/19 全球购物
公司财务工作总结的自我评价
2013/11/23 职场文书
《夕阳真美》教学反思
2014/04/27 职场文书
2014年党员自我评价材料
2014/09/22 职场文书
房屋租赁协议书
2014/10/18 职场文书
投资入股合作协议书
2014/10/28 职场文书
2015年生产车间工作总结
2015/04/22 职场文书
交通安全宣传标语(100条)
2019/08/22 职场文书
Python利用zhdate模块实现农历日期处理
2022/03/31 Python
vue ref如何获取子组件属性值
2022/03/31 Vue.js