手机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 ...
随机推荐
- Ubuntu 14.04 Android 使用Maven一个 用例project
在说明书前面描述SDK通过使用Ant发展. 本文试图在此基础上使用Maven发展. 在这里,我们需要使用maven-android-plugin. 在本文中,参考官方文件: https://code. ...
- 微软MVP社区夏日巡讲诚邀您的参与: 北京,上海,西宁,成都,西安
- 国外流行的共享网站实现:facebook,twitter,google+1,tumblr等待
近期需要做相关的国外几个站点共享,本来我以为它会和weibo.在同样的烦恼空间,什么appkey啦,apptoken啦.api啦.结果非常意外的发现并非如此恼火. Twitter分享: https:/ ...
- 大数据量传输时配置WCF的注意事项
原文:大数据量传输时配置WCF的注意事项 WCF传输数据量的能力受到许多因素的制约,如果程序中出现因需要传输的数据量较大而导致调用WCF服务失败的问题,应注意以下配置: 1.MaxReceivedMe ...
- 软测试综述——PV操作
在操作系统中,进程之间常常会存在相互排斥(都须要共享独占性资源时)和同步(完毕异步的两个进程的协作)两种关系.而信号量和PV操作完美有效的处理了这两种情况. 相互排斥:就好比过独木桥,一 ...
- mvc与My97DatePicker插件的结合
Razor视图引擎与My97DatePicker插件的结合 1 using System; 2 using System.Collections.Generic; 3 using System.Run ...
- 开展.net mvc3遇到怪事+解
发展到今天.net mvc3遇到怪事. 使用Firefox浏览器.打开index页,求index该控制器是很多次,代码查询数据库的多个运行.server减速. 而且没有刷新页面,随着时间的推移有十二请 ...
- 跟Bob大叔观OO原则
上篇总结了经典的23种 设计模式,详细的解读后期会陆续的详细揭开.使用设计模式的根本原因就是为了增强代码的复用性和可维护性.而面向对象是实现代码复用的有效途径,所以这里有必要了解一下OO的基本思想和原 ...
- 军医王-moTestin云测试看好移动医疗行业
看医生汪谟军:Testin云測在移动医疗产业大有可为 2014/10/21 · Testin · 开发人员訪谈 日常生活可能常常碰到这种情况:突然遇上头疼脑热.小病小痛,去医院又不方便:非常想了解家人 ...
- cocos2d-x 3.0游戏实例学习笔记《卡牌塔防》第六步---炮台&点击炮台加入英雄&英雄升级
/* 说明: **1.本次游戏实例是<cocos2d-x游戏开发之旅>上的最后一个游戏,这里用3.0重写并做下笔记 **2.我也问过木头本人啦,他说:随便写,第一别全然照搬代码:第二能够说 ...