<!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. NULL 与空字符串

    空字符串 '' 不占内存空间; NULL占一个字节的空间; 空字符串 的判断用 == <> NULL值用 is null ifnull();

  2. JVM插庄之一：JVM字节码增强技术介绍及入门示例

    字节码增强技术:AOP技术其实就是字节码增强技术,JVM提供的动态代理追根究底也是字节码增强技术. 目的:在Java字节码生成之后,对其进行修改,增强其功能,这种方式相当于对应用程序的二进制文件进行修 ...

  3. hdu 1074 状态压缩

    http://acm.hdu.edu.cn/showproblem.php?pid=1074 我们可以断定状态的终止态一定是n个数全部选完的情况,那么它的前一个状态是什么呢,一定是剔除任一门课程后的n ...

  4. Java enum（枚举）使用详解之二

    enum 对象的常用方法介绍 int compareTo(E o)            比较此枚举与指定对象的顺序. Class<E> getDeclaringClass()       ...

  5. 3.JasperReports学习笔记3-在浏览器生成PDF文件

    转自:https://i.cnblogs.com/posts?categoryid=921197 一.新建web工程,导入jasperreports所需的jar包,配置web.xml <serv ...

  6. CentOS7下yum方式安装mysql5.6

    在Centos7中用MariaDB代替了mysql数据库.所以在新安装MySQL前必须做好对系统的清理工作. 一．清理CentOS7下的MariaDB. [root@localhost ~]#rpm ...

  7. new LayoutParams 使用

    ImageView imageView = new ImageView(mcontext); LayoutParams layoutParams = new LayoutParams(150,130) ...

  8. Java之反射(部分文档摘过来方便以后查看)

    第1章 类加载器 1.1 类的加载 当程序要使用某个类时,如果该类还未被加载到内存中,则系统会通过加载,连接,初始化三步来实现对这个类进行初始化. l 加载 就是指将class文件读入内存,并为之创建 ...

  9. JDBC编程之数据查询

    ----------------siwuxie095                             JDBC 编程之数据查询             首先下载 MySQL 的 JDBC 驱动 ...

  10. HTML5-A*寻路算法

    设置起点 设置终点 设置障碍 清除障碍 允许斜向跨越