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 相关文章推荐
Jquery replace 字符替换实现代码
Dec 02 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
Dec 16 Javascript
jQuery 追加元素的方法如append、prepend、before
Jan 16 Javascript
js制作简易年历完整实例
Jan 28 Javascript
js获取Html元素的实际宽度高度的方法
May 19 Javascript
AngularJS中指令的四种基本形式实例分析
Nov 22 Javascript
Angular.JS中select下拉框设置value的方法
Jun 20 Javascript
jQuery中复合选择器简单用法示例
Mar 31 jQuery
JavaScript数组基于交换的排序示例【冒泡排序】
Jul 21 Javascript
使用 UniApp 实现小程序的微信登录功能
Jun 09 Javascript
带你使用webpack快速构建web项目的方法
Nov 12 Javascript
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 jQuery
解决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
PhpDocumentor 2安装以及生成API文档的方法
2014/05/21 PHP
PHP7新特性之抽象语法树(AST)带来的变化详解
2018/07/17 PHP
php设计模式之代理模式分析【星际争霸游戏案例】
2020/03/23 PHP
How to Auto Include a Javascript File
2007/02/02 Javascript
javascript 流畅动画实现原理
2009/09/08 Javascript
Javascript中获取出错代码所在文件及行数的代码
2010/09/23 Javascript
js 弹出框 替代浏览器的弹出框
2010/10/29 Javascript
关于JQuery($.load)事件的用法和分析
2013/04/09 Javascript
Javascript中常见的校验如域名、手机、邮箱等等
2014/01/02 Javascript
jquery.post用法之type设置问题
2014/02/24 Javascript
Js冒泡事件详解及阻止示例
2014/03/21 Javascript
使用JavaScript获取电池状态的方法
2014/05/03 Javascript
用JS生成UUID的方法实例
2016/03/30 Javascript
JS实现的适合做faq或menu滑动效果示例
2016/11/17 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
2017/06/06 Javascript
Angular.js前台传list数组由后台spring MVC接收数组示例代码
2017/07/31 Javascript
微信小程序 同步请求授权的详解
2017/08/04 Javascript
详解Angular路由之路由守卫
2018/05/10 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
2018/06/26 Javascript
IE8中jQuery.load()加载页面不显示的原因
2018/11/15 jQuery
中高级前端必须了解的JS中的内存管理(推荐)
2019/07/04 Javascript
javascript解析json格式的数据方法详解
2020/08/07 Javascript
Python中使用语句导入模块或包的机制研究
2015/03/30 Python
Python利用operator模块实现对象的多级排序详解
2017/05/09 Python
python基础之包的导入和__init__.py的介绍
2018/01/08 Python
简单的python协同过滤程序实例代码
2018/01/31 Python
Python 实现文件读写、坐标寻址、查找替换功能
2019/09/11 Python
详解Python Opencv和PIL读取图像文件的差别
2019/12/27 Python
Python多线程:主线程等待所有子线程结束代码
2020/04/25 Python
Myprotein中国网站:欧洲畅销运动营养品牌
2021/02/11 全球购物
教育技术职业规划范文
2014/03/04 职场文书
2014年镇党建工作汇报材料
2014/11/02 职场文书
护理医院见习报告
2014/11/03 职场文书
2014流动人口计划生育工作总结
2014/12/20 职场文书
银行客户经理岗位职责
2015/04/09 职场文书
小学信息技术教学反思
2016/02/16 职场文书