<!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. node.js+express验证码的实现

    安装ccap库 npm install ccap var ccap = require(); var captcha = ccap({ width:190, height:50, offset:30, ...

  2. 六 Django框架,models.py模块，数据库操作——链表结构，一对多、一对一、多对多

    链表操作 链表,就是一张表的外键字段,连接另外一张表的主键字段 一对多 models.ForeignKey()外键字段一对多,值是要外键的表类 from __future__ import unico ...

  3. Mysql异常_01_ 誓死登进mysql_Can't connect to MySQL server on 'localhost' (10061)

    现象:打开cmd,输入命令:mysql -uroot -p 回车之后,输入密码,结果进不去mysql,并且抛出异常 异常:Can't connect to MySQL server on 'local ...

  4. leetcode 258. Add Digits(数论)

    Given a non-negative integer num, repeatedly add all its digits until the result has only one digit. ...

  5. 不要使用Android Studio的Git Commit了---->记一次debug

    今天下午写了一些代码,吃晚饭时分用Android Studio commit了一下,不知道有没有选择Commit and push,结果刚才代码出bug我想回滚到上个版本的时候,发现Android S ...

  6. 关于avpicture_fill 和 sws_scale的关系

    avpicture_fill((AVPicture *) pFrameRGB, buffer, PIX_FMT_RGB565, pCodecCtx->width, pCodecCtx->h ...

  7. p2p视频点播系统开发案例――Myseelite

    项目地址:http://sourceforge.net/projects/myseelite/ 1. MySee公司倡导的开源项目,目前国内功能最强大的一个开源系统. 2. 一个直播(也支持轮播.点播 ...

  8. C#实现根据传入时间段，找出时间段内日期，并生成相对应文件路径

    [1]获取固定日期范围内的所有日期,以数组形式返回 /// <summary>        /// 获取固定日期范围内的所有日期,以数组形式返回        /// </summ ...

  9. jQuery DataTables 使用手册（精简版）

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/5182940.html 前排提醒,这个插件能不用就不用,那么多好的插件等着你,为什么要用它呢?就算用easyui的 ...

  10. Access中一句查询代码实现Excel数据导入导出

    摘 要:用一句查询代码,写到vba中实现Excel数据导入导出,也可把引号中的SQL语句直接放到查询分析器中执行正 文: 导入数据(导入数据时第一行必须是字段名): DoCmd.RunSQL &quo ...