具体操作见代码：

<!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. 厚着脸皮求领导写了一篇java小白进阶大牛之路！！！

    缘起&应朋友之邀 2019年已经过去两个月了,应朋友之邀,写写自己的个人经历,与其说经历还不如是自我的总结与反思.2012年2月份只身一人拖着行李箱来到北京库巴科技有限公司实习,那时候库巴处在 ...

  2. 【转】详解springboot-修改内置tomcat版本

    1.解析Spring Boot父级依赖 <parent> <groupId>org.springframework.boot</groupId> <artif ...

  3. 故障公告：docker swarm集群“群龙无首”造成部分站点无法访问

    今天傍晚 17:38-18:18 左右,由于 docker swarm 集群出现 "The swarm does not have a leader" 问题,造成博问.闪存.园子. ...

  4. CodeForces Round #544 Div.3

    A. Middle of the Contest 代码: #include <bits/stdc++.h> using namespace std; int h1, m1, h2, m2; ...

  5. git branch --set-upstream 本地关联远程分支

    最近使用git pull的时候多次碰见下面的情况: There is no tracking information for the current branch.Please specify whi ...

  6. 6-4 The present perfect

    1 Summary The present perfect is an important verb tense in English. It is used to talk about things ...

  7. js实现在光标的位置 添加内容

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  8. Django初印象之视图（view）

    一.view的初印象 一个视图函数(类),简称视图.我们发起web请求时,返回的web响应.[大家约定成俗将视图放置在项目(project)或应用程序(app)目录中的名为views.py的文件中.] ...

  9. js基础-字符串常用属性合集

    /*   *   * 实例方法---->必须要通过new的方式创建的对象(实例对象)来调用的方法   * 静态方法---->直接通过大写的构造函数的名字调用的方法(直接通过大写的对象名字调 ...

  10. JS自定义表单提交处理方案

    JS自定义数据提交处理方案 问题 在Ajax技术流行的今天,我遇到了一个很头疼的问题,我需要维护一个前人开发的问题单模块功能,并且不停的迭代开发,而这个问题就是问题单字段特别多,而且除了更新问题单外, ...