基于jQuery手机端上拉下拉刷新页面代码。这是一款类似QQ空间客户端或者微信下拉刷新页面特效代码。效果图如下:

在线预览   源码下载

实现的代码。

html代码:

 <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>

via:http://***/article/55236

jQuery手机端上拉刷新下拉加载更多页面的更多相关文章

  1. juery下拉刷新,div加载更多元素并添加点击事件(二)

    buffer.append("<div class='col-xs-3 "+companyId+"' style='padding-left: 10px; padd ...

  2. Android 自定义 ListView 上下拉动“刷新最新”和“加载更多”歌曲列表

    本文内容 环境 测试数据 项目结构 演示 参考资料 本文演示,上拉刷新最新的歌曲列表,和下拉加载更多的歌曲列表.所谓"刷新最新"和"加载更多"是指日期.演示代码 ...

  3. jQuery模拟原生态App上拉刷新下拉加载

    jQuery模拟原生态App上拉刷新下拉加载效果代码,鼠标上拉时会显示loading字样,并且会模拟加载一条静态数据,支持触屏设备使用. <!doctype html> <html ...

  4. Android之 RecyclerView,CardView 详解和相对应的上拉刷新下拉加载

    随着 Google 推出了全新的设计语言 Material Design,还迎来了新的 Android 支持库 v7,其中就包含了 Material Design 设计语言中关于 Card 卡片概念的 ...

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

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

  6. Flutter学习笔记(25)--ListView实现上拉刷新下拉加载

    如需转载,请注明出处:Flutter学习笔记(25)--ListView实现上拉刷新下拉加载 前面我们有写过ListView的使用:Flutter学习笔记(12)--列表组件,当列表的数据非常多时,需 ...

  7. 微信小程序 上拉刷新/下拉加载

    小程序项目中上拉刷新下拉加载是比较常见的需求,官方文档也提供了相当友好的API,但是因为API隐藏的比较深,文档描述也比较模糊所以也折腾了一番(官方文档),在此记录一下使用方式 onPullDownR ...

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

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

  9. 实现app上对csdn的文章列表上拉刷新下拉加载以及加入缓存文章列表的功能 (制作csdn app 四)

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/23698511 今天继续对我们的csdn客户端未完成的功能进行实现,本篇博客接着客 ...

随机推荐

  1. Leetcode 111 Minimum Depth of Binary Tree 二叉树

    找出最短的从叶子到根的路径长 可以回忆Maximum Depth of Binary Tree的写法,只不过在!root,我把它改成了10000000,还有max函数改成了min函数,最后的值如果是1 ...

  2. Python面试题(一)

    **晚上在公司的论坛上看到一道面试题,题目如下:随机给定一字符串和字符,要求重排,比如:'abde','c'.重排之后变成'abcde' **看到他们给的答案很多都是二分法重排,既然是字符类的处理,当 ...

  3. A new start

    学习前端已经有一年多,也自己写过不少博客.笔记,但是比较不开心的是有时候自己写的博客自己都看不懂,所以最后决定重新开一个博客,目标是写能让别人看懂也能让自己看懂的东西,那才算真成功真的懂了.最后希望的 ...

  4. Qt for Android 打包 SQLite 数据库

    Qt for Android 调用 SQLite 数据库时, 怎样将已经存在的数据库附加到 APK 中? 直接在你项目里面的Android源码的根目录下新建一个文件夹assets, 数据库就可以放里面 ...

  5. 使用 multiprocessing.dummy 执行多线程任务

    # -*- coding: utf-8 -*- # from multiprocessing import Pool 多进程 from multiprocessing.dummy import Poo ...

  6. 19数据表的创建-普通表&临时表-天轰穿大话数据库视频教程

    关键字:数据表 数据库性能 临时表 天轰穿 sqlserver 数据库大纲:数据表的特点,数据表的类型及用法,SQL创建数据表,创建临时表,全局临时表 优酷超清地址 腾讯超清地址 原文地址:http: ...

  7. Objective-C 语法之 static 关键字

    转:http://www.apkbus.com/android-593-1.html 学习过Java 或者 C 语言的朋友应该很清楚static关键字吧?在某个类中声明一个static 静态变量, 其 ...

  8. mssql 获取表空间大小

    create table #Data(name varchar(100),row varchar(100),reserved varchar(100),data varchar(100),index_ ...

  9. Java中BigDecimal的8种舍入模式

    java.math.BigDecimal 不可变的.任意精度的有符号十进制数.BigDecimal 由任意精度的整数非标度值和32位的整数标度(scale)组成. 如果为零或正数,则标度是小数点后的位 ...

  10. select into的不同数据库实现

    DB2中修改表的schema除了通常的创建别名,还可以删除表重建 删除表的顺序应该是先在另一个Schema下新建表,然后使用select ino将原表的数据导入新表,再删除原表. 实现如下: 在Sch ...