具体操作见代码：

<!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. ElasticSearch（九）：elasticsearch-head插件安装

    安装node 安装elasticsearch-head需要node.js的支持. 下载最新的node.js,下载地址:https://nodejs.org/en/download/ 将下载后的安装包放 ...

  2. Openwrt无线中继设置并访问外网

    Openwrt无线中继设置并访问外网 本篇博文参考来自:http://blog.csdn.net/pifangsione/article/details/13162023 配置目标 主路由器使用AP模 ...

  3. （四）Exploring Your Cluster

    The REST API Now that we have our node (and cluster) up and running, the next step is to understand ...

  4. MyExceptionFilter 异常注入

    public class MyExceptionFilter : IExceptionFilter { private ILogService logService; public MyExcepti ...

  5. SpringBoot中各配置文件的优先级及加载顺序

    我们在写程序的时候会碰到各种环境(开发.测试.生产),因而,在我们切换环境的时候,我们需要手工切换配置文件的内容.这大大的加大了运维人员的负担,同时会带来一定的安全隐患. 为此,为了能更合理地重写各属 ...

  6. 解决 AttributeError: 'ForeignKey' object has no attribute 're'

    解决办法 # print('rel...',filter_field_obj.re.to.objects.all()) print("rel...", filter_field_o ...

  7. SpringCloud（3）服务消费者（Feign）

    上一篇文章,讲述了如何通过 RestTemplate+Ribbon 去消费服务,这篇文章主要讲述如何通过Feign去消费服务. 1.Feign简介 Feign是一个声明式的伪Http客户端,它使得写H ...

  8. mybatis 配置文件全解

    目录 properties settings typeAliases mappers properties mybatis配置文件中,可以像代码一样定义变量,然后在配置文件的其他地方使用,比如数据库连 ...

  9. 一.从零认识XAML

    一.XMAL的简单了解 XAML读做zaml,,它是WPF中专门用于设计UI的语言,它简单易懂,结构清晰.是一种声明式语言,当你见到一个标签时,就意味着声明了一个对象:对象之间的层级关系要么是并列,要 ...

  10. Python进阶1---高阶函数、柯里化

    高阶函数 不相等  自定义sort函数 内建函数--高阶函数 #sort函数 def sort2(lst,key = None,reverse = False): res = [] if key is ...