web移动端下拉加载数据简单实现
//下拉加载在移动端会经常使用,有些小伙伴不清楚一些原理下面就简答的介绍一下 //首先需要监听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
};
.......
}
web移动端下拉加载数据简单实现的更多相关文章
- iscroll5 上拉,下拉 加载数据
我这里的思路是上拉时候只是加载第一页的内容,可根据实际情况修改其中的代码.请勿照搬.样式没怎么调,可以加载gif动画.1.没有数据时候,下拉可以加载数据.2.没有数据时候,点击也可以加载数据.3.其余 ...
- Jquery手机下拉刷新,下拉加载数据
一.Jquery手机下拉刷新,下拉加载数据.附加有源码 <!DOCTYPE html> <html> <head> <title>手机</titl ...
- 基于Zepto移动端下拉加载(刷新),上拉加载插件开发
写在前面:本人水平有限,有什么分析不到位的还请各路大神指出,谢谢. 这次要写的东西是类似于<今日头条>的效果,下拉加载上啦加载,这次做的效果是简单的模拟,没有多少内容,下面是今日头条的移动 ...
- 关于MJRefresh的下拉加载数据bug
当没有更多数据的时候显示NoMoreData 我的理解是先结束刷新再显示没有更多 今天之前一直没发现有问题 贴之前的代码 [self.collectionView reloadData]; [self ...
- 手机网站下拉加载数据js(简单版)
加载内容的地方html <div class="bgcolor_f0 clearfix"> <div class="recharge"> ...
- iscroll5 版本下的 上拉,下拉 加载数据
上拉时候只是加载第一页的内容,可根据实际情况修改其中的代码. <section id="downwraper" class="nodeBottom bot0 bgf ...
- juqery 下拉加载数据
html 代码 一开始是需要显示的第一页 <div class="hot-product f15 fixed-Width clearfix" id="goods ...
- vue-better-scroll实现移动端下拉加载组件
1.下载安装better-scroll npm i -S better-scroll 1.1安装完成之后,打开pacaage.json文件查看,是否有(better-scroll) "dep ...
- php ajax 下拉加载数据
视图 <html> <head> <title>健康知识</title> <script type="text/javascript&q ...
随机推荐
- Android命令行下蓝牙使用
注意:此部分仅仅适用于broadcom 系列蓝牙芯片,比如RK903, AP6xxx 系列 通过su 命令切换到root 用户 1.先确认RFKILL 驱动已经载入 ls /sys/class/rfk ...
- hunnu--11545--小明的烦恼——找路径
小明的烦恼--找路径 Time Limit: 2000ms, Special Time Limit:5000ms, Memory Limit:32768KB Total submit users: ...
- Boom!!!计算机系统,从理解到爆炸,Bomblab
进入文件夹下 ./bomb 開始执行炸弹 对于炸弹command not found之类的鬼畜情况: chmod 777 bomb 然后再执行炸弹 objdump -d bomb > bomb. ...
- COGS28 [NOI2006] 最大获利[最大权闭合子图]
[NOI2006] 最大获利 ★★★☆ 输入文件:profit.in 输出文件:profit.out 简单对比时间限制:2 s 内存限制:512 MB [问题描述] 新的技术正冲击着手 ...
- java8--面向对象 下(疯狂java讲义3) 复习笔记
1.如果一个包装类和一个基本类型比较大小,或者是两个基本类型进行比较大小,直接用==就好: 如果是两个包装类进行比较大小,那么使用equals(),返回值是true,false,或者使用Xxx.com ...
- weblogic启动后 登陆控制台特别慢的问题
weblogic官方文档给出的问题原因: 江湖偏方: 修改jdk:修改$JAVA_HOME/jre/lib/security/java.security文件,替换securerandom.source ...
- ios状态栏的一些操作
[UIApplication sharedApplication].networkActivityIndicatorVisible = YES; //显示 [UIApplication sharedA ...
- JVM Safepoint 安全点
一.什么是安全点: 在可达性分析算法中查找存活的对象,首先要找到哪些是GC Roots: 有两种查找GC Roots的方法: 一种是遍历方法区和栈区来查找(保守式GC): 一种是通过OopMap的数据 ...
- 用Delphi7 调用.NET 2.0的WebService 所要注意的问题(Document格式和UTF8编码)
Delphi7 调用VS.NET 2005开发的基于.NET 2.0的WebService时发生了错误.查阅资料 http://www.community.borland.com/article/bo ...
- 概率dp集合
bzoj1076 你正在玩你最喜欢的电子游戏,并且刚刚进入一个奖励关.在这个奖励关里,系统将依次随机抛出k次宝物,每次你都可以选择吃或者不吃(必须在抛出下一个宝物之前做出选择,且现在决定不吃的宝物以后 ...