博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
web移动端下拉加载数据简单实现
阅读量:4916 次
发布时间:2019-06-11

本文共 809 字,大约阅读时间需要 2 分钟。

//下拉加载在移动端会经常使用,有些小伙伴不清楚一些原理下面就简答的介绍一下 //首先需要监听window的滚动事件,下拉其实就是在监听window滚动事件
var pageNum = 1;//分页第一页 var pageTotal = 0;//默认总页数
$(window).scroll(function () {
var scrollTop = $(this).scrollTop();//这一步是计算已经卷进去滚动条的的高度 var scrollHeight = $(document).height();//这个就算当前页面的总高度 var windowHeight = $(this).height();//这个是当前window也就是浏览器的高度 if (scrollTop + windowHeight == scrollHeight) {//如果这两个相等,不就意味着已经到了页面底部了吗? pageNum += 1;//这是一个全局的变量,页面滑到底部就加一 next(pageNum);//完了执行你请求数据的函数 } }); //说明:分页是有总页数的,当超过了总页数那么久不去请求,所以你在next()做一些处理比如:你将第一次获取的数据中有总页数的这个参数,那么你赋值给
 pageTotal ,那么以后的下拉中你可以 function next(pageNum) {
if (pageTotal != 0) {
if (pageNum > pageTotal) {
return false//当前页数大于总页数,就return }; ....... }

转载于:https://www.cnblogs.com/-youth/p/6141173.html

你可能感兴趣的文章
Typedef与Struct
查看>>
Linux常用网络命令整理
查看>>
JMeter学习笔记--使用URL回写来处理用户会话
查看>>
Error creating bean with name 'documentationPluginsBootstrapper' defined in URL
查看>>
Javascript样例之文档章节滚动全版(DOM)
查看>>
C++ 面向对象
查看>>
Maven Nexus
查看>>
js 判断滚动条的滚动方向
查看>>
关于springboot启动时候报错:springboot Failed to parse configuration class [Application]
查看>>
java中Class的使用详解
查看>>
css,js文件后面加一个版本号
查看>>
webpack第一节(2)
查看>>
python之asyncio三种应用方法
查看>>
Laravel 的文件存储 - Storage
查看>>
转:[Server] 在 Windows 上安裝 PHP 5.3 開發環境
查看>>
【IE6的疯狂之二】IE6中PNG Alpha透明(全集)
查看>>
第一个Shell脚本
查看>>
C++ 小笔记
查看>>
zabbix 安装rpm
查看>>
PhantomJS:Full web stack,No browser required
查看>>