手机web下拉加载
//需要 zepto.js支持
var page=0;//当前页
var pages=1;//总页数
var ajax=!1;//是否加载中
Zepto(function($){
$(window).scroll(function(){
if(($(window).scrollTop() + $(window).height() > $(document).height()-40) && !ajax && pages > page){
//滚动条拉到离底40像素内,而且没ajax中,而且没超过总页数
//json_ajax(cla,++page);
page++;//当前页增加1
ajax=!0;//注明开始ajax加载中
$(".list").append('<div class="loading"><img src="/template/mobile/loading.gif" alt="" /></div> ');//出现加载图片
$.ajax({
type: 'GET',
url: './json.php?page='+page+'&'+Math.random(),
dataType: 'json',
success: function(json){
pages=json.pages;//更新总页数
page=json.page;//更新当前页(js不太可靠)
for(var i= 0,l = list.length;i<l;i++){
//处理数据并插入
}
$(".loading").remove();//删除加载图片
ajax=!1;//注明已经完成ajax加载
},
error: function(xhr, type){
$(".loading").html("暂无内容!");
}
});
}
});
})
手机web下拉加载的更多相关文章
- 手机网站下拉加载数据js(简单版)
加载内容的地方html <div class="bgcolor_f0 clearfix"> <div class="recharge"> ...
- Jquery手机下拉刷新,下拉加载数据
一.Jquery手机下拉刷新,下拉加载数据.附加有源码 <!DOCTYPE html> <html> <head> <title>手机</titl ...
- web移动端下拉加载数据简单实现
//下拉加载在移动端会经常使用,有些小伙伴不清楚一些原理下面就简答的介绍一下 //首先需要监听window的滚动事件,下拉其实就是在监听window滚动事件 var pageNum = 1;//分页第 ...
- ASP.NET仿新浪微博下拉加载更多数据瀑布流效果
闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. 在开始之前, ...
- Android之 RecyclerView,CardView 详解和相对应的上拉刷新下拉加载
随着 Google 推出了全新的设计语言 Material Design,还迎来了新的 Android 支持库 v7,其中就包含了 Material Design 设计语言中关于 Card 卡片概念的 ...
- Flutter学习笔记(25)--ListView实现上拉刷新下拉加载
如需转载,请注明出处:Flutter学习笔记(25)--ListView实现上拉刷新下拉加载 前面我们有写过ListView的使用:Flutter学习笔记(12)--列表组件,当列表的数据非常多时,需 ...
- html5实现下拉加载
介绍: 实现手机下拉自动加载数据. 原理: 通过检测页面内容距离加上当前滚动的距离大于或等于滚动距离总长时,调用ajax数据加载 事例: var myMoreInfo = new iMoreInfo( ...
- 关于MJRefresh的下拉加载数据bug
当没有更多数据的时候显示NoMoreData 我的理解是先结束刷新再显示没有更多 今天之前一直没发现有问题 贴之前的代码 [self.collectionView reloadData]; [self ...
- JQuery实现无刷新下拉加载图片
最近做的一个项目需要做页面无刷新下拉加载图片,调研了一番,大多都采用检测滚动条达到底部,然后利用ajax加载下一页数据对页面数据进行添加,根据这一逻辑,自己写了一个,具体代码如下: JQu ...
随机推荐
- 新RSS reader
阅读之前采取正确的方法,但是非常不介意,没有收到订阅很大. 走到今天 http://www.feedspot.com 2014/11/8追加:用下来感觉不错. feedspot 的相关快捷键例如以下: ...
- oracle Constraint[相似 constraint使用方法总结 I]
约束简单介绍 约束用于确保数据库数据满足特定的商业逻辑或者企业规则,假设定义了约束,而且数据不符 合约束,那么DML操作(INSERT.UPDATE.DELETE)将不能成功运行.约束包含NOT NU ...
- Team Foundation Server 2015使用教程--读取器tfs组的checkin权限修改
- MVC — 初步理解IIS工作流程
声明:本文只是自己的总结和积累.IIS7.x 目录 IIS流程及组成部分 ASP.NET流程及组成部分 IIS与ASP.NET MVC 一.IIS流程及组成部分 1.Http.SYS:负责监听HTT ...
- 一个关于Linux Bridge配置的吐嘈
话说有些事情十分适合在放假前的一天折腾一天,但绝对不适合在你准备去吃饭前多看一眼...我上周就碰到了这么一件揪心的事,终于以低血糖收场.十分狼狈地四处觅食,却觅到了一包超级辣的鸡爪.吃完后感觉症状加重 ...
- crmsql句子的实体关系实体字段的信息窗口
在crm里面怎样用sql语句查询这些信息? 查询实体信息: --查询实体信息,实体名称:account select * from MetadataSchema.Entity where name= ...
- Android Context MODE的四种模式解析(转)
Context.MODE_PRIVATE:为默认操作模式,代表该文件是私有数据,只能被应用本身访问,在该模式下,写入的内容会覆盖原文件的内容,如果想把新写入的内容追加到原文件中.可以使用Context ...
- 開始开发 Dashboard Widgets,第2章,读书笔记
文件夹:http://blog.csdn.net/wide288/article/details/40298693 主要内容: widgets 的组成是什么. 怎么创建 info.plist 文件 怎 ...
- python 导入库问题
最终解决如下面:我不知道有没有多余的空间 from django.conf import settings from sys import path path.extend(['/home/zoues ...
- HDU 1198 Farm Irrigation (并检查集合 和 dfs两种实现)
Farm Irrigation Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...