具体操作见代码：

<!doctype html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <link href="css/mui.min.css" rel="stylesheet" />

    </head>

    <body>

        <div class="mui-scroll-wrapper mui-content">

            <div class="mui-scroll">

                <ul class="mui-table-view" id="list">

                        <li class="mui-table-view-cell">

                            <a class="mui-navigate-right">

                                Item

                            </a>

                        </li>

                        <li class="mui-table-view-cell">

                            <a class="mui-navigate-right">

                                 Item

                            </a>

                        </li>

                        <li class="mui-table-view-cell">

                            <a class="mui-navigate-right">

                                 Item

                            </a>

                        </li>

                    </ul>

            </div>

        </div>

        <script src="js/mui.min.js"></script>

        <script type="text/javascript">

//            var num=1

//            mui.init({

//                pullRefresh:{

//                    container:'mui-content',

//                    up:{

//                        auto:true,

//                        contentrefresh:'请稍后...',

//                        contentnomore:'没有数据了',

//                        callback:function(){

////                            var list=document.getElementById("list");

////                            for(var i=0;i>10;i++){

////                                var li=document.createElement("li");

////                                li.className='mui-table-view-cell';

////                                list.appendChild(li);

////                                num++

////                            };

//                            setTimeout(function(){

//                                this.endPullToRefresh(true);

//                            }.bind(this),500)

//                        },

//                    }

//                }

//            });

//

//            

            var num=

            mui.init({

  pullRefresh:{

    container:".mui-content",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等

    //1.下拉刷新函数

    down:{

      style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式

      color:'red', //可选，默认“#2BD009” 下拉刷新控件颜色

//    height:'50px',//可选,默认50px.下拉刷新控件的高度,

//    range:'100px', //可选 默认100px,控件可下拉拖拽的范围

//    offset:'0px', //可选 默认0px,下拉刷新控件的起始位置

      auto: true,//可选,默认false.首次加载自动上拉刷新一次

      //双webView多加下面三行，且mui('.mui-content').pullRefresh().endPulldownToRefresh();

      //单webView:不加下面三行，且mui('.mui-content').pullRefresh().endPulldown();

      contentdown:'下拉就可以刷新了',

      contentover:'松开我就停止了',

      contentrefresh:'正在加载...',

//    callback :pullfresh-function //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；

    callback:function(){

        var list=document.getElementById('list')

        for(var i=;i<=;i++){

            var li=document.createElement('li');

            li.className='mui-table-view-cell';

            li.innerHTML='Item'+num;

            list.appendChild(li);

            num++;

        }

        setTimeout(function(){

            //设置在一定时间内隐藏刷新图标

            mui('.mui-content').pullRefresh().endPulldownToRefresh();

        },);

    }

    },

    //2.下拉加载函数

    up:{

      style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式

      color:'red', //可选，默认“#2BD009” 下拉刷新控件颜色

//    height:'50px',//可选,默认50px.下拉刷新控件的高度,

//    range:'100px', //可选 默认100px,控件可下拉拖拽的范围

//    offset:'0px', //可选 默认0px,下拉刷新控件的起始位置

      auto: true,//可选,默认false.首次加载自动上拉刷新一次

     contentrefresh:'请稍后。。。',

     contentnomore:'没有数据了',

//    callback :pullfresh-function //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；

    callback:function(){

        var list=document.getElementById('list')

        for(var i=;i<=;i++){

            var li=document.createElement('li');

            li.className='mui-table-view-cell';

            li.innerHTML='Item'+num;

            list.appendChild(li);

            num++;

        }

        //当num>15时停止下拉更新

        setTimeout(function(){

            if(num>=){

                this.endPullupToRefresh(true);

            }else{

                this.endPullupToRefresh(false);

            }

        }.bind(this),);

    }

    }

  }

});

        </script>

    </body>

</html>

mui上拉刷新+下拉加载的更多相关文章

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

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

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

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

  3. Flutter学习笔记（25）--ListView实现上拉刷新下拉加载

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

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

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

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

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

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

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

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

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

  8. XRecyclerView上拉刷新下拉加载

    效果图: 首先要添加依赖: //xrecyclerviewimplementation 'com.jcodecraeer:xrecyclerview:1.3.2'//Gsonimplementatio ...

  9. iOS：延迟加载和上拉刷新/下拉加载的实现

    lazy懒加载(延迟加载)UITableView 举个例子,当我们在用网易新闻App时,看着那么多的新闻,并不是所有的都是我们感兴趣的,有的时候我们只是很快的滑过,想要快速的略过不喜欢的内容,但是只要 ...

  10. MUI - 上拉刷新/下拉加载

    新闻信息列表必备的功能,支持Table,Ul等列表. 以下是DIV版本,在安卓端或者ios端必须使用双webview模式,传送门:http://dev.dcloud.net.cn/mui/pulldo ...

随机推荐

  1. Loj #3059. 「HNOI2019」序列

    Loj #3059. 「HNOI2019」序列 给定一个长度为 \(n\) 的序列 \(A_1, \ldots , A_n\),以及 \(m\) 个操作,每个操作将一个 \(A_i\) 修改为 \(k ...

  2. day2 and day3 总结-python基础-坚持就是胜利

    今日份快捷键学习,pycharm中按CTRL+ALT+L 自动规范化操作,不过和QQ的快捷键会有冲突,建议更改QQ的 知识点: 1.编码 2.while循环 3.运算符 4.数字int 5.布尔值 6 ...

  3. MySQL参数最大连接数max_connections

    1.查看最大连接数 mysql> show status like 'Threads%'; +-------------------+-------+ | Variable_name | Val ...

  4. TortoiseGit 安装

    1.TortoiseGit 下载安装 2.语言包下载安装 3.配置语言 一 TortoiseGit 下载安装 官网下载地址:https://download.tortoisegit.org/tgit/ ...

  5. JS&Java实现常见算法面试题

    Github上的算法repo地址:https://github.com/qcer/Algo-Practice (如果你觉得有帮助,可以给颗星星收藏之~~~) 一.Java实现部分 参见随笔分类的算法部 ...

  6. Oracle伪列（ROWNUM）的使用

    先看一个题:查询emp表的信息,显示前5行数据,这时候我们就需要使用伪列(rownum)的概念. rownum在数据表并不是一个真实的列,其实每一行应该都有一个行号,这个伪列就是用来记录这个行号的,这 ...

  7. c++ fmt 库安装和使用示例

    安装: 1 git clone  https://github.com/fmtlib/fmt.git 2. cmake . 3. make && make install  #incl ...

  8. svnsync同步svn

    使用svnsync实现已有版本库的镜像svn不支持分布式开发,所以把svn版本库保存在一台服务器上是不安全的.制作一个镜像svn版本库有多种方式,我采用subversion自带的svnsync程序. ...

  9. 妙解Servlet四大域对象

    pageContext pageContext作用域为page(页面执行期). request request是表示一个请求,只要发出一个请求就会创建一个request,它的作用域仅在当前请求中有效. ...

  10. iOS发布证书申请

    一.  准备工作1.1.准备打包服务器 打包服务器搭建详见http://bbs.justep.com/thread-67724-1-1.html 或 http://www.cnblogs.com/Wo ...