原生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: /* 简洁的下拉刷新,上拉加载插件 ...
随机推荐
- windows 安装gitbook并使用gitbook editor可视化工具
GitBook是一个基于 Node.js 的命令行工具,可使用 Github/Git 和 Markdown 来制作精美的电子书. 一.官网下载nodejs直接安装 传送门,安装完成后如下: 可以看到n ...
- 创建FTP访问的YUM源
创建FTP访问的YUM源 一.安装vsftpd(步骤详见“在linux中搭建vsftpd.docx”) 在主机A上安装FTP,安装后的ftp信息如下:ftp://192.168.43.300 账号密 ...
- vue- Vue-Cli脚手架工具安装 -创建项目-页面开发流程-组件生命周期- -03
目录 Vue-Cli 项目环境搭建 与 python 基础环境对比 环境搭建 创建启动 vue 项目 命令创建项目(步骤小多) 启动 vue 项目(命令行方式) 启动 vue 项目(pycharm 方 ...
- Vue/React圆环进度条
数据展示,一直是各行各业乐此不疲的需求,具体到前端开发行业,则是各种各种图表数据展示,各种表格数据展示,烦不胜烦(繁不胜繁)! 前几天刚做了折线图.柱状图.饼状图之类的图表数据展示效果,今天又碰到了类 ...
- c++ 对特定进程的内存监控
在工具实现的过程中,遇到了内存爆了的问题,部分模型的规模可以达到10的100次方方甚至1000次方.(工具的主要算法涉及到了递归,递归深度会很深,所以也用到了ulimit修改栈空间来缓解爆栈的问题,治 ...
- Tomcat源码分析二:先看看Tomcat的整体架构
Tomcat源码分析二:先看看Tomcat的整体架构 Tomcat架构图 我们先来看一张比较经典的Tomcat架构图: 从这张图中,我们可以看出Tomcat中含有Server.Service.Conn ...
- mysql引号与esc键下方键
navicat导出数据表发现建表语句如下: create table `product_category` ( `category_id` int not null auto_increment, ` ...
- docker镜像制作必备技能
正文 使用过docker的都知道dockerfile,其用于定义制作镜像的流程,由一系列命令和参数构成的脚本,这些命令应用于基础镜像并最终创建一个新的镜像.可参考往期文章学习:docker基础知识整理 ...
- 带你涨姿势的认识一下 Kafka
Kafka 基本概述 什么是 Kafka Kafka 是一个分布式流式平台,它有三个关键能力 订阅发布记录流,它类似于企业中的消息队列 或 企业消息传递系统 以容错的方式存储记录流 实时记录流 Kaf ...
- redhat5配置网络源
最近适配了一堆linux系统, Redhat4/5/6, ubuntu 12/14/16, Suse 10/11/12 其中适配到Red5 时候配置网络源 # The mirror system us ...