原生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: /* 简洁的下拉刷新,上拉加载插件 ...
随机推荐
- 【爬虫小程序:爬取斗鱼所有房间信息】Xpath(多线程版)
# 本程序亲测有效,用于理解爬虫相关的基础知识,不足之处希望大家批评指正 from queue import Queue import requests from lxml import etree ...
- Linux系统学习之Ln(软连接和硬链接)
可简单理解为,软连接:创建的软连接文件是源文件的快捷方式,删除创建的软连接文件,源文件不受影响,连接消失. 硬链接:两个连体的文件,修改其中一个文件,另外一个文件也会随之更改:删除其中一个文件,另外一 ...
- Spring Boot (十): Spring Boot Admin 监控 Spring Boot 应用
Spring Boot (十): Spring Boot Admin 监控 Spring Boot 应用 1. 引言 在上一篇文章<Spring Boot (九): 微服务应用监控 Spring ...
- MySQL-时区导致的时间前后端不一致
背景 今天早上刚上班,就被同事提示,程序的日期处理有问题.数据库里日期为:2019-05-21 11:00:00 而前端显示的日期为:2019-05-21 16:00:00 分析 那肯定是和时区相关了 ...
- java中String转Date与Date转String
public static void main(String[] args) throws ParseException { SimpleDateFormat simpleDateFormat = n ...
- 数据表管理admin
知识预览 admin组件使用 admin源码解析 回到顶部 admin组件使用 Django 提供了基于 web 的管理工具. Django 自动管理工具是 django.contrib 的一部分.你 ...
- 寻找子串位置<codevs>
KMP板子题; 如果不会可以参考其他算法书 代码: #include<iostream> #include<stdio.h> #include<stdlib.h> ...
- Python移动自动化测试面试 ☝☝☝
Python移动自动化测试面试 ☝☝☝ Python移动自动化测试面试 学习 教程 1.super 是干嘛用的?在 Python2 和 Python3 使用,有什么区别?为什么要使用 super? ...
- 大型php网站性能和并发访问优化方案
网站性能优化对于大型网站来说非常重要,一个网站的访问打开速度影响着用户体验度,网站访问速度慢会造成高跳出率,小网站很好解决,那对于大型网站由于栏目多,图片和图像都比较庞大,那该怎么进行整体性能优化呢? ...
- CTF-SSH服务渗透
环境 Kali ip 192.168.56.102 Smb 靶机ip 192.168.56.101 0x01信息探测 首页发现有类似用户名的信息 先记录下来 Martin N Hadi M Jimmy ...