一、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. PAT甲级——A1110 Complete Binary Tree【25】

    Given a tree, you are supposed to tell if it is a complete binary tree. Input Specification: Each in ...

  2. vue打包后index.html界面报错

    vue项目完成后,打包放到服务器上,打开index.html页面时发现一片空白并且报错 很明显是js和css引用不到. 解决办法: 修改vue项目config文件夹下面的index.js,将asset ...

  3. POJ 2318 /// 判断点与直线的位置关系

    题目大意: n块玩具箱隔板 m个玩具落地点 给定玩具箱的左上和右下两个端点 接下来给定n块隔板的上点的x和下点的x(因为y就是玩具箱的上下边缘) 接下来给定m个玩具落地点 输出n+1个区域各有的玩具数 ...

  4. python中使用xlrd、xlwt操作excel

    python 对 excel基本的操作如下: # -*- coding: utf-8 -*- import xlrd import xlwt from datetime import date,dat ...

  5. JZOJ[3771] 【NOI2015模拟8.15】小 Z 的烦恼

    题目 描述 题目大意 有从111到nnn的数字,每个数字都可以放在一个盒子里(可以不放).一旦放,满足: 如果它不在第mmm个盒子,那么它的两倍一定在后面一个盒子里. 如果它不在第111个盒子,那么它 ...

  6. java定时器demo

    package cn.threadtest.thread; import java.util.Date; import java.util.Timer; import java.util.TimerT ...

  7. Docker系列(十四)：Kubernetes API和源码分析

    Kubernetes API入门 Ku8 eye开源项目

  8. Docker系列(十)：Kubernetes集群入门

    kubenetes安装 官网:https://github.com/kubernetes/kubernetes/blob/release-1.0/docs/getting-started- guide ...

  9. mongdb 使用聚合函数异常

    异常信息: Command execution failed:  Error [The 'cursor' option is required, except for aggregate with t ...

  10. OpenCASCADE点向圆柱面投影

    OpenCASCADE点向圆柱面投影 eryar@163.com OpenCASCADE的类Extrema_ExtPElS提供了点到基本曲面的投影计算功能,距离可能是最大值或是最小值.如下图所示的点到 ...