一、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. springboot新手脱坑之无法下载依赖包

    1. Apache maven 3.39配置 1.环境变量自己配置, 2.配置阿里云镜像和本地仓库 <localRepository>D:\Apache\maven\repository& ...

  2. StringUtils工具

    ppublic class StringUtils { private StringUtils() { } /** * 文本左边补零 * * @param maxLength 文本长度 * @para ...

  3. vue中 给router-view 组件的 绑定 key 的原因

    不设置 router-view 的 key 属性 由于 Vue 会复用相同组件, 即 /page/1 => /page/2 或者 /page?id=1 => /page?id=2 这类链接 ...

  4. JavaScript中定义函数的几种方式

    函数的组成:函数名 + 函数体 1.使用function关键字定义函数 -- 具有优先级,优先将function关键字定义的函数优先执行 function  functionName(arg0, ar ...

  5. 深入理解Java虚拟机（程序编译与代码优化）

    文章首发于微信公众号:BaronTalk,欢迎关注! 对于性能和效率的追求一直是程序开发中永恒不变的宗旨,除了我们自己在编码过程中要充分考虑代码的性能和效率,虚拟机在编译阶段也会对代码进行优化.本文就 ...

  6. iPhoneX适配随笔

    1.安全区域 2.NavigationBar 和 TabBar的xib示意图 两个View要相同的效果,坐标不同 UIButton *btn = [UIButton buttonWithType:UI ...

  7. 渗透测试入门DVWA 环境搭建

    DVWA是一款渗透测试的演练系统,在圈子里是很出名的.如果你需要入门,并且找不到合适的靶机,那我就推荐你用DVWA. 我们通常将演练系统称为靶机,下面请跟着我一起搭建DVWA测试环境.如果你有一定的基 ...

  8. 《DSP using MATLAB》Problem 8.28

    代码: %% ------------------------------------------------------------------------ %% Output Info about ...

  9. .net core 使用swagger生成API文档

    [1]安装Swashbuckle.AspNetCore包 [2]在Startup.cs中注册swagger //注册Swagger生成器,定义一个和多个Swagger 文档 services.AddS ...

  10. mysql TIMESTAMP 不能为NULL

    一般建表时候,创建时间用datetime,更新时间用timestamp.这是非常重要的. 我测试了一下,如果你的表中有两个timestamp字段,只要你更新任何非timestamp字段的值,则第一个t ...