//需要 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下拉加载的更多相关文章

  1. 手机网站下拉加载数据js(简单版)

    加载内容的地方html <div class="bgcolor_f0 clearfix"> <div class="recharge"> ...

  2. Jquery手机下拉刷新,下拉加载数据

    一.Jquery手机下拉刷新,下拉加载数据.附加有源码 <!DOCTYPE html> <html> <head> <title>手机</titl ...

  3. web移动端下拉加载数据简单实现

    //下拉加载在移动端会经常使用,有些小伙伴不清楚一些原理下面就简答的介绍一下 //首先需要监听window的滚动事件,下拉其实就是在监听window滚动事件 var pageNum = 1;//分页第 ...

  4. ASP.NET仿新浪微博下拉加载更多数据瀑布流效果

    闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. 在开始之前, ...

  5. Android之 RecyclerView,CardView 详解和相对应的上拉刷新下拉加载

    随着 Google 推出了全新的设计语言 Material Design,还迎来了新的 Android 支持库 v7,其中就包含了 Material Design 设计语言中关于 Card 卡片概念的 ...

  6. Flutter学习笔记(25)--ListView实现上拉刷新下拉加载

    如需转载,请注明出处:Flutter学习笔记(25)--ListView实现上拉刷新下拉加载 前面我们有写过ListView的使用:Flutter学习笔记(12)--列表组件,当列表的数据非常多时,需 ...

  7. html5实现下拉加载

    介绍: 实现手机下拉自动加载数据. 原理: 通过检测页面内容距离加上当前滚动的距离大于或等于滚动距离总长时,调用ajax数据加载 事例: var myMoreInfo = new iMoreInfo( ...

  8. 关于MJRefresh的下拉加载数据bug

    当没有更多数据的时候显示NoMoreData 我的理解是先结束刷新再显示没有更多 今天之前一直没发现有问题 贴之前的代码 [self.collectionView reloadData]; [self ...

  9. JQuery实现无刷新下拉加载图片

          最近做的一个项目需要做页面无刷新下拉加载图片,调研了一番,大多都采用检测滚动条达到底部,然后利用ajax加载下一页数据对页面数据进行添加,根据这一逻辑,自己写了一个,具体代码如下: JQu ...

随机推荐

  1. Hybrid app 发展历程

    距离上一篇<基于微信 js-sdk 的简单应用>已经快一年了,说来真是惭愧.上次不久之后便换了工作,一直处于比较忙的状态.其次后面酣畅一段时间都没有从事移动相关的工作.直到今年3月份开始, ...

  2. JAVA学习课第五十八届 — GUI

    GUI Graghical User Interface(图形用户接口) java为GUI提供的对象都存在java.awt和java.swing包中 Java的GUI做的的确干只是C++等.不打算浪费 ...

  3. OpenCV(C++接口)学习笔记1-图像读取、显示、保存

    OpenCV在2.0加入版本号之后C++接口函数,学习前C语言的接口功能.现在OpenCV它已被发展到2.4.9版本号,所以,我决定学习C++接口函数,与步伐. 1.创建图像 cv::Mat imag ...

  4. fastclick 源码阅读备份

    ;(function () { 'use strict'; //构造函数 function FastClick(layer, options) { var oldOnClick; options = ...

  5. MEF初体验之三:Exports声明

    组合部件通过[ExportAttribute]声明exports.在MEF中,有这么几种成员可声明exports的方式:组合部件(类).字段.属性和方法.我们来看下ExportAttribute类的声 ...

  6. 新秀nginx源代码分析数据结构篇(四)红黑树ngx_rbtree_t

    新秀nginx源代码分析数据结构篇(四)红黑树ngx_rbtree_t Author:Echo Chen(陈斌) Email:chenb19870707@gmail.com Blog:Blog.csd ...

  7. WPF六个控制概述

    在线演示:http://v.youku.com/v_show/id_XNzA0NjU1Mjk2.html 清晰版视频+代码下载:http://115.com/lb/5lbcftnrfo9s 一.简单介 ...

  8. 并发队列ConcurrentLinkedQueue和阻塞队列LinkedBlockingQueue用法(转)

    在Java多线程应用中,队列的使用率很高,多数生产消费模型的首选数据结构就是队列(先进先出).Java提供的线程安全的Queue可以分为阻塞队列和非阻塞队列,其中阻塞队列的典型例子是BlockingQ ...

  9. WebHooks

    WebHooks ASP.NET 5 Beta 7 版本   在 VS2015 发布的同时,微软也发布了 ASP.NET 5 的路线图(详见ASP.NET 5 Schedule and Roadmap ...

  10. axure & Markman

    axure & Markman学习总结 最近学了几款有意思的软件,一款是axure,另一款是Markman.接下来聊聊自己的学习心得吧. 关于axure,百度上的解释是:是一个专业的快速原型设 ...