手机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 ...
随机推荐
- 【嵌入式开发】写入开发板Linux系统-模型S3C6410
笔者 : 万境绝尘 转载请著名出处 最终拿到板子了, 嵌入式开发正式开启. 板子型号 : 三星 S3C6410 基于ARM11, 指令集基于arm6指令集; 为毛不是 Cortext A9的板子; 烧 ...
- 使用shell/python获取hostname/fqdn释疑(转)
一直以来被Linux的hostname和fqdn(Fully Qualified Domain Name)困惑了好久,今天专门抽时间把它们的使用细节弄清了. 一.设置hostname/fqdn 在Li ...
- android 实现悬架控制
实现桌面View 如桌面歌词 1)将要显示在桌面的view,通过WindowManager.addView.挂在到WindowManager下;注意,WindowManager对象 ...
- Debian/Ubuntu 已安装gcc/g++ 4.8.1
gcc 4.8.1 是第一个全然支持C++11(C++14非常可能在gcc 4.9.0開始支持.)的编译器,Windows上能够安装mingw版的.在sourceforge 上有下载.安装也比較方便. ...
- Linux网络编程一站式学习
提要 学过非常多遍计算机网络,依旧不会网络编程. 看完这篇文章之后就不会是这样了. 环境:Ubuntu14.04 64bit 何为Socket 是基于TCP/IP的网络应用编程中使用的有关数据通信的概 ...
- Android深入研究Adapter重绘
一直以来Adapter的使用都仅仅是流于表面,仅仅知道要实现几个抽象的方法,把Adapter设置给某种listView,就能够非常好的工作起来.所谓理解仅仅是建立在主观的猜想上面,认为应该是这样,对, ...
- 【日常学习】【欧拉功能】codevs2296 荣誉的解决方案卫队的一个问题
转载请注明出处 [ametake版权全部]http://blog.csdn.net/ametake欢迎来看看 题目来源:SDOI2008 文章被剽窃非常严重啊 所以以后都带上版权信息 先上题目 题目描 ...
- Android Notification (转)
上回我们提到在4.0ICS之后,Google为Android平台的Notification这把“倚天剑”注入了更多新鲜的元素,使其更加实用美观.Notification的样式从此变得丰富起来,以适应于 ...
- mybatis型材xxxx.xml缺少后果返回类型
下面是一个mybatis型材xxxx.xml失踪resultMap错误: 严重: Servlet.service() for servlet [SpringMVC] in context with p ...
- java回调机制及其实现(转)
1. 什么是回调函数 回调函数,顾名思义,用于回调的函数.回调函数只是一个功能片段,由用户按照回调函数调用约定来实现的一个函数.回调函数是一个工作流的一部分,由工作流来决定函数的调用(回调)时机.回调 ...