一、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. java编程规约三

    七.集合处理 1.尽量使用String对象做Map的key 2.list转数组,用list的toArray(T[] array),传入的参数array是类型完全一样的数组,大小是list.size() ...

  2. Django框架中session存储到redis中的配置

    本文链接:https://blog.csdn.net/linqunbin/article/details/94786313————————————————版权声明:本文为CSDN博主「linqunbi ...

  3. ABP Linq 扩展的 WhereIf 查询内部实现

    public static class QueryableExtensions { public static IQueryable<T> WhereIf<T>(this IQ ...

  4. 获取url指定参数值（js/vue）

    function getParam(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&am ...

  5. Luogu P1131 [ZJOI2007]时态同步(dfs)

    P1131 [ZJOI2007]时态同步 题意 题目描述 小\(Q\)在电子工艺实习课上学习焊接电路板.一块电路板由若干个元件组成,我们不妨称之为节点,并将其用数字\(1,2,3,\dots\).进行 ...

  6. npm淘宝镜像配置

    npm config set registry https://registry.npm.taobao.org

  7. uoj33 树上GCD

    题意:给你一棵树,根节点为1,每条边长度为1.定义f(u,v)=gcd(u-lca(u,v),lca(u,v)-v),求有多少个无序点对f(u,v)=i.对每个i输出答案. n<=20W. 标程 ...

  8. dvajs+antd定制主题踩坑记录

    记一下刚刚解决的问题,困扰了几周,期间困兽争斗,甚至想放弃antd组件库.终于出来了,人类科技又进步了(才怪). 首先我按照dva官网建立了项目.里面引入antd的各种组件,因为需要用到一个switc ...

  9. Python学习day43-数据库(多表关系)

    figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...

  10. 进程外Session---数据库Session的配置

    怎么将Session记录到数据库中呢? 其实微软已经为我们设置好了.只要我们简单的配置一下就行了. 当然也要在 “我的电脑” 鼠标右键--->管理--->服务和应用程序----> 服 ...