<!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. 解决xhost: unable to open display ""

    首先安装vncserver,如图: 切换账户:sudo su到root下 执行:export DISPLAY=:0.0 执行:xhost +,如图:

  2. POJ 1504,ZOJ 2001，UVA 713， Adding Reversed Numbers，错误，已找到错误

    ------------------------------------------------------------ 以此题警告自己: 总结, 1.在数组的使用时,一定别忘了初始化 2.在两种情况 ...

  3. 关于unity3D的GL图像库的使用

    GL图象库 GL图象库是底层的图象库,主要功能是使用程序来绘制常见的2D与3D几何图形.这些图形具有一定的特殊性,他们不属于3D网格图形,只会以面的形式渲染.使用GL图象库,可在屏幕中绘制2D几何图形 ...

  4. GUI创建各常用控件（一）

    首先,作个申明: 1.这是一个野路子非科班的小菜鸟的学习,故诚心欢迎批评指正(同时所述内容可能有误): 2.本人目前使用的Unity3D版本为 5.3.5: 言归正传! 事实上在开发过程中已经很少用G ...

  5. codeforces 553B B. Kyoya and Permutation(找规律)

    题目链接: B. Kyoya and Permutation time limit per test 2 seconds memory limit per test 256 megabytes inp ...

  6. hdu-5637 Transform(位运算+bfs)

    题目链接: Transform Time Limit: 4000/2000 MS (Java/Others)     Memory Limit: 131072/131072 K (Java/Other ...

  7. Java进阶08 GUI

    GUI(Graphical User Interface)提供了图形化的界面,允许用户以图形的方式与系统进行互动.在GUI推广之前,用户通常要以文本命令的方式来控制计算机.GUI直观的将计算机的功能呈 ...

  8. 【遍历二叉树】07恢复二叉搜索树【Recover Binary Search Tree】

    开一个指针数组,中序遍历这个二叉搜索树,将节点的指针依次保存在数组里, 然后寻找两处逆序的位置, 中序便利里BST得到的是升序序列 ++++++++++++++++++++++++++++++++++ ...

  9. luogu1353 Running

    dp[i][j]表示走i分钟疲劳值为j时的最远距离 然后搞一下就好啦 #include <iostream> #include <cstdio> #include <al ...

  10. CodeForces - 1017F. The Neutral Zone （数学+Bitset存素数+素数筛优化）

    Notice: unusual memory limit! After the war, destroyed cities in the neutral zone were restored. And ...