一、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. 一个mdl相关的问题

    感觉挺有意义的,细节问题 http://www.kernelmode.info/forum/viewtopic.php?f=14&t=4318这个人代码到底犯了什么错误 I want to p ...

  2. mac nginx php php-fpm

    #the php-fpm config and cammand... cp /private/etc/php-fpm.conf.default /usr/local/etc/php-fpm.conf ...

  3. JS流程控制语句 多种选择（Switch语句) 当有很多种选项的时候，switch比if else使用更方便。

    多种选择(Switch语句) 当有很多种选项的时候,switch比if else使用更方便. 语法: switch(表达式) { case值1: 执行代码块 1 break; case值2: 执行代码 ...

  4. JS规则 自加一，自减一 ( ++和- -) 【mynum = mynum + 1;//等同于mynum++;】

    自加一,自减一 ( ++和- -) 算术操作符除了(+.-.*./)外,还有两个非常常用的操作符,自加一"++":自减一"--".首先来看一个例子: mynum ...

  5. 【颓废篇】人生苦短， 我用python（二）

    当时产生学习python的欲望便是在看dalao们写脚本的时候… 虽然dalao们好像用的是js来着.. 不过现在好像很多爬虫也可以用python写啊… 所以学python没什么不妥. 而且csdn整 ...

  6. 试做Chrome插件——whatweb的chrome插件(从老博客转)

    引子 最近一个月每天早上在学Javascript,刚学完基础语法和一点点jQuery,今天忍不住写个Chrome玩玩看看自己对JavaScript的掌握怎么样了. 目标 考虑了一下,打算做个小东西,但 ...

  7. task code

    using System; using System.Collections.Generic; using System.Threading; using System.Threading.Tasks ...

  8. fetchSql是3.2.3新增的连贯操作方法，用于直接返回SQL而不是执行查询。

    fetchSql是3.2.3新增的连贯操作方法,用于直接返回SQL而不是执行查询. 例如: $result = M('User')->fetchSql(true)->find(1); 输出 ...

  9. 「题解」：[线性代数]：relays 奶牛接力跑

    问题: relays 奶牛接力跑 时间限制: 1 Sec  内存限制: 256 MB 题面 题目描述 FJ的N(2 <= N <= 1,000,000)头奶牛选择了接力跑作为她们的日常锻炼 ...

  10. 02_springmvc处理器映射器和适配器（补充）

    一.非注解的处理器映射器 HandlerMapping 负责根据request请求找到对应的Handler处理器及Interceptor拦截器,将它们封装在HandlerExecutionChain ...