一、Jquery手机下拉刷新，下拉加载数据。附加有源码

<!DOCTYPE html>

<html>

<head>

    <title>手机</title>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="reset.css" />

    <link rel="stylesheet" href="pullToRefresh.css" />

    <script src="iscroll.js"></script>

    <script src="pullToRefresh.js"></script>

    <script src="colorful.js"></script>

    <style type="text/css" media="all">

        body, html {

            padding: 0;

            margin: 0;

            height: 100%;

            font-family: Arial, Microsoft YaHei;

            color: #111;

        }

        li {

            /*border-bottom: 1px #CCC solid;*/

            text-align: center;

            line-height: 80px;

        }

    </style>

</head>

<body>

    <!--must content ul li,or shoupi-->

    <div id="wrapper">

        <ul>

            <li>row 10</li>

            <li>row 9</li>

            <li>row 8</li>

            <li>row 7</li>

            <li>row 6</li>

            <li>row 5</li>

            <li>row 4</li>

            <li>row 3</li>

            <li>row 2</li>

            <li>row 1</li>

        </ul>

    </div>

    <script>

        for (var i = 0; i < document.querySelectorAll("#wrapper ul li").length; i++) {

            document.querySelectorAll("#wrapper ul li")[i].colorfulBg();

        }

        refresher.init({

            id: "wrapper",//<------------------------------------------------------------------------------------┐

            pullDownAction: Refresh,

            pullUpAction: Load

        });

        var generatedCount = 0;

        function Refresh() {

            setTimeout(function () {    // <-- Simulate network congestion, remove setTimeout from production!

                var el, li, i;

                el = document.querySelector("#wrapper ul");

                el.innerHTML = '';

                for (i = 0; i < 11; i++) {

                    li = document.createElement('li');

                    li.appendChild(document.createTextNode('async row ' + (++generatedCount)));

                    el.insertBefore(li, el.childNodes[0]);

                }

                wrapper.refresh();/****remember to refresh after  action completed！ ---yourId.refresh(); ----| ****/

                for (var i = 0; i < document.querySelectorAll("#wrapper ul li").length; i++) {

                    document.querySelectorAll("#wrapper ul li")[i].colorfulBg();

                }

            }, 1000);

        }

        function Load() {

            setTimeout(function () {// <-- Simulate network congestion, remove setTimeout from production!

                var el, li, i;

                el = document.querySelector("#wrapper ul");

                for (i = 0; i < 2; i++) {

                    li = document.createElement('li');

                    li.appendChild(document.createTextNode('async row ' + (++generatedCount)));

                    el.appendChild(li, el.childNodes[0]);

                }

                wrapper.refresh();/****remember to refresh after action completed！！！   ---id.refresh(); --- ****/

                for (var i = 0; i < document.querySelectorAll("#wrapper ul li").length; i++) {

                    document.querySelectorAll("#wrapper ul li")[i].colorfulBg();

                }

            }, 1000);

        }

    </script>

    <script src="/scripts/2bc/_gg_980_90.js" type="text/javascript"></script>

</body>

</html>

二、源码地址：http://files.cnblogs.com/files/dongh/%E4%B8%8B%E6%8B%89%E5%8A%A0%E8%BD%BD%E5%88%B7%E6%96%B0.rar

Jquery手机下拉刷新，下拉加载数据的更多相关文章

  1. mui 动态加载数据出现的问题处理 (silder轮播组件 indexedList索引列表 下拉刷新不能继续加载数据)

    mui-slider 问题:动态给mui的图片轮播添加图片,轮播不滚动. 解决:最后把滚动轮播图片的mui(".mui-slider").slider({interval: 300 ...

  2. 微信小程序下拉刷新 并重新加载数据

    1.在json页面配置: { "enablePullDownRefresh": true } 2.调用刷新函数 onPullDownRefresh: function() { wx ...

  3. jQuery WeUI 组件下拉刷新和滚动加载的实现

    最近在做手机版使用到了下拉刷新和滚动加载,记录一下实现过程: 一.引入文件 ? 1 2 3 4 <link rel="stylesheet" href="Conte ...

  4. ListView上拉刷新和分页加载完整的Dome

    很多人工作的过程中都会碰到ListView下拉刷新和分页加载,然后大多数公司都已经把框架写好了,大家直接用就可以了,有些人一直对这个事情处于迷茫状态,为了让大家对上拉刷新和分页加载有一个比较全面的认识 ...

  5. jQuery 滚动条 滚动到底部（下拉到底部） 加载数据(触发事件、处理逻辑)、分页加载数据

    1.针对浏览器整个窗口滚动 主要代码: <script type="text/javascript"> ; function GetProductListPageFun ...

  6. 第三方 XListview 上拉加载、下拉刷新、分页加载和Gson解析

    注意:此Demo用的是第三方的Xlistview.jar,需要复制me文件夹到项目中,两个XML布局文件和一张图片 把下面的复制到String中 <string name="xlist ...

  7. Jquery zTree结合Asp.net实现异步加载数据

    zTree结合Asp.net实现异步加载数据 实现简单操作 zTree 下载 api 访问 :http://www.ztree.me/v3/main.php 例子中用到json数据转化 newtons ...

  8. jquery easyui使用（三）······datagrid加载数据(已解决)

    <div id="table_Data"> </div> $("#table_Data").datagrid({ toolbar: '# ...

  9. Android 下拉刷新上啦加载SmartRefreshLayout + RecyclerView

    在弄android刷新的时候,可算是耗费了一番功夫,最后发觉有现成的控件,并且非常好用,这里记录一下. 原文是 https://blog.csdn.net/huangxin112/article/de ...

  10. SwipeRefreshLayout实现下拉刷新上滑加载

    1. 效果图 2.RefreshLayout.java package myapplication.com.myapplication; import android.content.Context; ...

随机推荐

  1. mui 上拉加载 实现分页加载功能

    mui 上拉加载 实现分页加载功能,效果图: 分页功能(上拉加载): 1.引入需要的css.js文件 <link href="static/css/mui.css" rel= ...

  2. 本地项目通过 git 同步到 github

    1. github创建仓库并克隆仓库地址 2. 在本地通过git命令:git clone <仓库地址> 生成github仓库文件夹 3. 将本地项目复制到该文件夹 4. 通过git命令:g ...

  3. ReadyAPI创建功能测试的多种方法

    原文:ReadyAPI创建功能测试的多种方法 声明:如果你想转载,请标明本篇博客的链接,请多多尊重原创,谢谢! 本篇使用的 ReadyAPI版本是2.5.0 在ReadyAPI中有多种方法可以创建功能 ...

  4. selenium基础（多表单切换、多窗口切换）

    一.多表单的切换 frame:HTML页面中的一中框架,主要作用是在当前页面中指定区域显示另一页面元素:              (HTML语言中,frame/iframe标签为表单框架) 在web ...

  5. vue 利用intersectionOberver实现全局appear/disappear事件

    搬运自:https://juejin.im/post/5cd10959f265da03a00fe5c6 效果: demo地址: https://codepen.io/deepkolos/pen/OYP ...

  6. jQuery鼠标拖曳改变div大小（模拟textarea右下角拖曳）

    jQuery.fn.extend({ drag: function() { $(document).off("mouseup.drag").on("mouseup.dra ...

  7. 监听事件动态改变dom状态

    html代码: <table class="table table-striped"> <thead> <tr> <th>分类ID& ...

  8. MS-coco数据集下载及使用（转）

    先做个标记,改天研究下. 几个链接: MS coco数据集介绍及下载 Microsoft COCO 数据集 COCO Dataset 数据特点 COCO 数据集的使用

  9. JDK源码阅读--ArrayList

    public class ArrayList<E> extends AbstractList<E> implements List<E>, RandomAccess ...

  10. 数据库备份还原——mysqlbackup与mysqldump对比测试

    1      环境描述 1.1      硬件环境 服务器类型:华为RH5885 IP: 10.148.128.100 内存: 64G 物理CPU个数:4 CPU核数:8 逻辑CPU个数:64 Int ...