原生js实现上拉加载
原生js实现上拉加载其实超级简单,把原理整明白了你也会,再也不用去引一个mescroll啦~
好了,废话不多说,开始进入正题:上拉加载是怎么去做的,原理就是监听滚动条滑到页面底部,然后就去做一次请求数据。那么只要我们对滚动监听即可。
现在,让我们来看代码:
window.onscroll = function () {
var scrollH = document.documentElement.scrollHeight;// 文档的完整高度
var scrollT = document.documentElement.scrollTop || document.body.scrollTop; // 当前滚动条的垂直偏移
var screenH = window.screen.height; // 屏幕可视高度
if ((scrollH - scrollT - screenH) < 5) { //5只是一个相对值,可以让页面再接近底面的时候就开始请求
// 执行请求
}
};
温馨提醒:做好防抖以及判断没有数据的情况。
原生js实现上拉加载的更多相关文章
- js_原生js实现上拉加载更多的功能。
1.人生啊,是我莽撞了啊.这是我公司一个喜欢读书的女孩子的个性签名,喜欢哪些句子,不悲伤,却切切实实的令人喜好. 2.写程序是一件很直接明了的事情,明白了就是明白了,不懂就是不懂,不懂装懂的会让你走很 ...
- dropload.js(上拉加载插件使用过程中遇到的坑)
dropload.js相关介绍和使用以及demo下载详见:https://github.com/ximan/dropload (原文出处) 之前因为项目需要一个上拉加载的效果,然后无意中看到了此插件, ...
- js实现上拉加载思路整理
1.整体模拟滚动 监听touchmove事件,比较 scrollTop 和 $scroller.scrollHeight() - $container.height(). 缺点:滑动不流畅, tran ...
- (效果一)js实现上拉加载
实现思路:获取滚动元素的高度,滚动条距离顶部的距离,滚动条的高度, 算式:可视窗口的高度 + 滚动条距离顶部的距离 == 滚动条的高度就说明到底部. HTML <!doctype html> ...
- 原生js移动端touch事件实现上拉加载更多
大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: //获取要操作的元素 var objSection = document.ge ...
- 【前端】上拉加载更多dropload.min.js的使用
代码如下:入职代码修改接口及html为自己的即可(下面主要展示js部分) <!DOCTYPE html><html> <head> <meta charset ...
- C#构造方法(函数) C#方法重载 C#字段和属性 MUI实现上拉加载和下拉刷新 SVN常用功能介绍(二) SVN常用功能介绍(一) ASP.NET常用内置对象之——Server sql server——子查询 C#接口 字符串的本质 AJAX原生JavaScript写法
C#构造方法(函数) 一.概括 1.通常创建一个对象的方法如图: 通过 Student tom = new Student(); 创建tom对象,这种创建实例的形式被称为构造方法. 简述:用来初 ...
- zepto.js + iscroll.js上拉加载 下拉加载的 移动端 新闻列表页面
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...
- js上拉加载、下拉刷新的插件
之前在网上找那种下拉刷新,上拉加载的插件,有一款IScroll,但是用起来太麻烦,于是就自己写了款,但依赖于jquery.js,bug肯定有,希望评论提出. js: /* 简洁的下拉刷新,上拉加载插件 ...
随机推荐
- HttpWebRequest上传多文件和多参数——整理
1.整理HttpWebRequest上传多文件和多参数.较上一个版本,更具普适性和简易型.注意(服务方web.config中要配置)这样就可以上传大文件了 <system.webServer&g ...
- MongoDB 学习笔记之 手动预先分片
手动预先分片: 目的:手动预先分片是为了防止未来chunk的移动,减少IO. sh.shardCollection("shop.users",{"userId" ...
- MongoDB 学习笔记之 MongoDB导入导出
MongoDB数据导入导出: mongoexport: -host 机器 -port 端口 -u 用户名 -p 密码 -d 库名 -c 表名 -f 列名 -o 导出的文件名 -q 查询条件 --csv ...
- 294 div2 C. A and B and Team Training
C. A and B and Team Training 题目:A and B are preparing themselves for programming contests. An import ...
- Linux入门(磁盘与挂载)
Linux入门之 磁盘管理与挂载 在我们使用计算机或者是服务器时,总会需要接入外部存储的时候,正如我们使用的移动硬盘.U盘.接入手机等,就是一个接入外部存储的过程.上述这些在接入Windows时我 ...
- BZOJ 4621: Tc605
Description 最初你有一个长度为 N 的数字序列 A.为了方便起见,序列 A 是一个排列. 你可以操作最多 K 次.每一次操作你可以先选定一个 A 的一个子串,然后将这个子串的数字全部变成原 ...
- css中em单位详解,说明
em详解 em可以理解成“倍”. em会以父级元素中所设置的字体像素值为基准值进行成倍放大: 字体大小=(父级元素中的字体像素 * em的值) 例: 网页部分代码如下: 1.我现在没有在父级 ...
- redis安装及启动
Redis 的安装及启动停止 下载 https://redis.io/download 软件copy至虚拟机中,常用的路径为/root/software 开始安装 安装gcc 目的是为了编译软件 yu ...
- Integer类型与int的==比较
前言 Java中有两种类型 基本类型 基本数据类类型存的是数值本身 引用类型 引用类型变量在内存放的是数据的引用 基本类型通过==比较的是他们的值大小,而引用类型比较的是他们的引用地址 正文 在一些特 ...
- java中的静态
static静态 public static void main 类只是用来存储和被调用的,而对象是需要执行的,执行时就必定需要知道程序的入口,这个入口就是由main所在的位置. Java的类中没有m ...