<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

</head>

<style>

html,

body {}

</style>

<body>

    <div id="main">

        <ul id="container">

            <li>1</li>

            <li>1</li>

            <li>1</li>

            <li>1</li>

            <li>1</li>

            <li>1</li>

            <li>1</li>

            <li>1</li>

            <li>1</li>

            <li>1</li>

            <li>1</li>

            <li>1</li>

            <li>1</li>

            <li>1</li>

            <li>1</li>

            <li>1</li>

            <li>1</li>

            <li>1</li>

            <li>1</li>

            <li>1</li>

            <li>1</li>

            <li>1</li>

            <li>1</li>

            <li>1</li>

            <li>1</li>

            <li>1</li>

            <li>1</li>

            <li>1</li>

            <li>1</li>

            <li>1</li>

            <li>1</li>

            <li>1</li>

            <li>1</li>

            <li>1</li>

            <li>1</li>

            <li>1</li>

            <li>1</li>

            <li>1</li>

            <li>1</li>

            <li>1</li>

            <li>1</li>

            <li>1</li>

            <li>1</li>

            <li>1</li>

        </ul>

    </div>

</body>

</html>

<script>

var page = 0;

var loading = false; //是否处于加载状态,true则触发scroll事件也不在加载内容。

var finished = false;//是否已加载完成，ture则不在加载内容。

function loadData() {

    totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop()); //浏览器的高度加上滚动条的高度 

    if ($(document).height() <= totalheight) { //当文档的高度小于或者等于总的高度的时候,开始动态加载数据

        //加载数据

        page++;

        console.log("这里是第" + page + "页")

        $("#container").append("<li>我是新加载出来的数据</li><li>我是新加载出来的数据</li><li>我是新加载出来的数据</li><li>我是新加载出来的数据"+page+"</li>");

    }

}

$(window).scroll(function() {

    console.log("滚动条到顶部的垂直高度: "+$(document).scrollTop());

    console.log("页面的文档高度 :"+$(document).height());

    console.log('浏览器的高度:'+$(window).height());

    if(!loading){

        loadData();

    }

});

</script>

jq写的上拉刷新的更多相关文章

  1. Android UI之下拉刷新上拉刷新实现

    在实际开发中我们经常要用到上拉刷新和下拉刷新,因此今天我写了一个上拉和下拉刷新的demo,有一个自定义的下拉刷新控件 只需要在布局文件中直接引用就可以使用,非常方便,非常使用,以下是源代码: 自定义的 ...

  2. vue loadMore 上拉刷新不能实现的坑

    1.如果你写的代码没问题,但依然不能实现上拉刷新效果,那你有可能是缺少了overflow: scroll 2.如果上拉刷新一直在加载状态,需要调用this.$refs.loadmore.onBotto ...

  3. iscroll.js实现上拉刷新，下拉加载更多，应用技巧项目实战

    上拉刷新,下拉加载更多...仿原生的效果----iscroll是一款做滚动效果的插件,具体介绍我就不废话,看官方文档,我只写下我项目开发的一些用到的用法: (如果不好使,调试你的css,想必是个很蛋疼 ...

  4. 上拉刷新和下拉刷新的两种方法（包括使用第三方库MJRefresh）

    一.使用苹果原生的方法 1.下拉刷新 2.上拉刷新 (1 首先要新建一个footer得XIB文件,当然同时包括对应的控制器文件,例如在XIB文件中可以如下拖拉对应的控件 (2 然后在代码文件中写一个实 ...

  5. iOS动画进阶 - 实现炫酷的上拉刷新动效

    移动端訪问不佳,请訪问我的个人博客 近期撸了一个上拉刷新的小轮子.仅仅要遵循一个协议就能自己定义自己动效的上拉刷新和载入,我自己也写了几个动效进去,以下是一个比較好的动效的实现过程 先上效果图和git ...

  6. 安卓自带下拉刷新SwipeRefreshLayout加入上拉刷新功能

    在项目里面要用到刷新库.曾经都是使用第三方的.只是看到官方出了  SwipeRefreshLayout之后就用SwipeRefreshLayout.可是不知道什么原因官方SwipeRefreshL ...

  7. Flutter学习笔记（25）--ListView实现上拉刷新下拉加载

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

  8. SwipeRefreshLayout + RecyclerView 实现 上拉刷新 和 下拉刷新

    下拉刷新和上拉刷新都用SwipeRefreshLayout 自带的进度条 布局 <?xml version="1.0" encoding="utf-8"? ...

  9. 使用MJRefresh遇到的一个问题，上拉刷新后tableview瞬间滑到最底部

    最近用MJRefresh上拉刷新时遇到一个问题,就是上拉刷新后,tableview会瞬间滑到最底部,用户还要往回翻才能看到新刷出来的数据,体验十分不好.查了很久没找到原因,最后发现在refreshvi ...

随机推荐

  1. POJ 2240 Arbitrage（Floyed-Warshall算法）

    题意:给出n种货币,m种兑换比率(一种货币兑换为另一种货币的比率),判断测试用例中套汇是否可行.(套汇的意思就是在经过一系列的货币兑换之后,是否可以获利.例如:货币i→货币j→货币i,这样兑换后,是否 ...

  2. Mybatis中collection与association的区别

    association是多对一的关系 collection是一个一对多的关系

  3. IO - 同步，异步，阻塞，非阻塞 (转帖：http://blog.csdn.net/historyasamirror/article/details/5778378)

    同步(synchronous) IO和异步(asynchronous) IO,阻塞(blocking) IO和非阻塞(non-blocking)IO分别是什么,到底有什么区别?这个问题其实不同的人给出 ...

  4. 机器学习 Generative Learning Algorithm (B)

    Naive Bayes 在GDA模型中,特征向量x是连续的实数向量,在这一讲里,我们将要讨论另外一种算法用来处理特征向量x是离散值的情况. 我们先考虑一个例子,用机器学习的方法建立一个垃圾邮件过滤器, ...

  5. vue2.0中的$router 和 $route的区别

    1.router是VueRouter的一个对象,通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象,这个对象中是一个全局的对象,他包含了所有的路由包含了 ...

  6. Unity3d中SendMessage 用法

      Message相关有3条指令:SendMessage ("函数名",参数,SendMessageOptions) //GameObject自身的ScriptBroadcastM ...

  7. 使用 Anthem.NET 框架的一个调试经历

    简介:Anthem 是一个很好用的 Ajax 框架,支持 ASP.NET 1.1, 2.0.由于该框架的所有控件都继承自 ASP.NET 自身的服务器控件,保留了几乎所有这些控件的属性和行为(除了把它 ...

  8. 服务注册选型比较:Consul vs Zookeeper vs Etcd vs Eureka

    zookeeper基于paxos的化简版zab,etcd基于raft算法.consul也是基于raft算法.etcd和consul作为后起之秀,并没有因为已经有了zookeeper而放弃自己,而是采用 ...

  9. SpringMVC 学习笔记(文件的上传和下载)

    在web项目中会遇到的问题:文件上传 文件上传在前端页面的设置:form表单 设置 input 类型 文件上传的请求方式要使用post,要将enctype设置为multipart/form-data ...

  10. ASPX 关闭子窗口后自动更新父窗口

    Response.Write("<script language:javascript>javascript:window.close();</script>&quo ...