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 ...
随机推荐
- 1 npoi 网上 不用模板 设置密码 workbook.WriteProtectWorkbook("password", "admin"); 、、 2 locked.IsLocked = true; sheet1.ProtectSheet("password");NPOI操作EXCEL--设置密码才可以修改单元格内容 3 模板设置密码 确定原密码 设置新密码
1 workbook.WriteProtectWorkbook("password", "admin"); 还是可以进去 只读进去 可以编辑 编辑就另存为 ...
- subclassdlgitem
subclassdlgitem 该函数用来子类化一个控件. Subclass(子类化)是MFC中最常用的窗体技术之一.子类化完成两个工作:一是把窗体类对象attach到一个windows窗体实体中(即 ...
- MD5加密实现类不是Windows平台下联邦信息处理标准验证过的加密算法的一部分
在.NET应用程序中,MD5CryptoServiceProvider实例化时,造成This implementation is not part of the Windows Platform FI ...
- jws webservice code
1.服务器端建立 1.1.创建接口 [java] view plaincopy @WebService public interface IWebService { int add(int ...
- POJ1144 Network 无向图割点
题目大意:求以无向图割点. 定义:在一个连通图中,如果把点v去掉,该连通图便分成了几个部分,则v是该连通图的割点. 求法:如果v是割点,如果u不是根节点,则u后接的边中存在割边(u,v),或者v-&g ...
- Safair css hack
一下方式不会影响chrome浏览器样式 _::-webkit-full-page-media, _:future, :root .class{ /*此处放css样式*/ }
- IE67 下 setattribute class 失效
解决办法.将class 换成 className ,同理.ff不能识别className,将其换成class element.setAttribute("class"," ...
- Velocity模板引擎笔记
模板引擎中判断对象是否为空: #if(!${jsonObj.data.buyerName} || ${jsonObj.data.buyerName} == '') <p>采 ...
- 修改STM32库函数中的晶振值
STM32F407的库文件中默认晶振值为25MHz,若外接晶振8MHz,则需修改以下几个地方: 1)修改HSE_VALUE的值 将#define HSE_VALUE ((uint32_t)250000 ...
- 织梦CMS首页、列表页文章如何调出该文章TAG标签?
1.如果是dedecms v5.7版本直接使用标签 [field:id function=GetTags(@me)/] 就可以调用出来了.只不过不带连接的. 2.如果需要连接请注释掉include/h ...