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 ...
随机推荐
- 删除moduleCache下文件解决预编译头文件相关的编译错误
之前有在代码全部正确的情况下,遇到过下面的编译错误: fatal error: file '.....h' has been modified since the precompiled header ...
- MongoDB与MySQL的插入性能测试【转】
1.1 MongoDB的简单介绍 在当今的数据库市场上,MySQL无疑是占有一席之地的.作为一个开源的关系型数据库,MySQL被大量应用在各大网站后台中,承担着信息存储的重要作用.2009年,甲骨文 ...
- 【转载】C#相等性比较
本文阐述C#中相等性比较,其中主要集中在下面两个方面 ==和!=运算符,什么时候它们可以用于相等性比较,什么时候它们不适用,如果不使用,那么它们的替代方式是什么? 什么时候,需要自定一个类型的相等性比 ...
- LeetCode232 Implement Queue using Stacks Java 题解
题目: Implement the following operations of a queue using stacks. push(x) -- Push element x to the bac ...
- CSS属性中Display与Visibility的不同
大多数人很容易将CSS属性display和visibility混淆,它们看似没有什么不同,其实它们的差别却是很大的.visibility属性用来确定元素是显示还是隐藏,这用visibility=&qu ...
- iOS UILabel换行同时修改字体大小颜色
UIButton *onlyPriceBtn = [UIButton buttonWithType:UIButtonTypeCustom]; onlyPriceBtn.layer.borderColo ...
- day 18 面向对象的 继承
一.概念性知识 面向对象的三大特征: 继承,多态,封装 继承是创建新类的一种方法,在python中,新建的类可以继承一个或多个父类,父类称作基类或超类,新建的类又称作派生类或子类. 继承的好处 ...
- Hibernate exception
1.a different object with the same identifier value was already associated with the session. 错误原因:在h ...
- VC FTP服务器程序分析(一)
想在QT上移植一个FTP服务器程序,先学习windows下的FTP服务器例子,然后随便动手写点东西. 在pudn上搜索 "FTP服务器端和客户端实现 VC“这几个关键字,就可以搜到下面要分析 ...
- glibc CVE-2015-7547漏洞的分析和修复方法【转】
本文转载自:http://blog.csdn.net/tengxy_cloud/article/details/50764370 漏洞概述 glibc中处理DNS查询的代码中存在栈溢出漏洞,远端攻击者 ...