具体操作见代码：

<!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. R语言学习——向量

    以下为在RStudio中输入 #为注释符,其后内容程序不执行 > #向量是用于储存数值型.字符型或者逻辑型数据的一维数组.执行组合功能的函数c()可用来创建向量.示例如下: > a< ...

  2. Django-CRM项目学习（三）-stark的页面展示

    开始今日份整理,主要为stark组件的增删改以及model_form组件的使用以及form组件的回顾 1.list_display_link功能 功能:客制化字段进行跳转到指定的页面(编辑页面) 1. ...

  3. 【Git】+安装+使用+配置

    Git安装及使用: https://www.cnblogs.com/ximiaomiao/p/7140456.html Git下载地址: http://git-scm.com/download/win ...

  4. Visual Studio中Image Watch的使用

    Imag watch的简介 Image Watch是一个VS插件,能够让你在调试一个OpenCV程序的时候,看到内存中的图像,这对跟踪bug或者理解一段代码非常有帮助.(原文:Image Watch ...

  5. C# 使用DES对字符串进行加密

    1.DES加密是属于对称加密,加密和解密使用的密钥必须要保持一致,且必须为8位,使用前首先添加引用: 2.逻辑实现代码如下:

  6. System.IO在不存在的路径下创建文件夹和文件的测试

    本文测试System.IO命名空间下的类,在不存在的路径下创建文件夹和文件的效果: 首先测试创建文件夹: System.IO.Directory.CreateDirectory(@"C:\A ...

  7. FM算法解析及Python实现

    1. 什么是FM? FM即Factor Machine,因子分解机. 2. 为什么需要FM? 1.特征组合是许多机器学习建模过程中遇到的问题,如果对特征直接建模,很有可能会忽略掉特征与特征之间的关联信 ...

  8. 基于mybatis基本操作

    实体 在对上述三个实体操作中了解mybatis的实现 全部代码 pro1是另外的一个完整项目用spring和struts2 hibernate 下载  https://github.com/Danov ...

  9. PS外挂滤镜调出清晰对比照片

    最终效果 一.打开原图. 二.我们使用类似第一部分的相同方法,但设置上略有不同,我们将光线放在不同的地方.复制底层,执行滤镜-LUCIS ART水彩滤镜-LUCISART 选择 雕刻 设置参数为25. ...

  10. 解决Jenkins中执行jmeter脚本后不能发报告（原报告被覆盖、新报告无法保存）的问题

    我没有找到根本原因,但是我用了个取巧的办法: 先将原来的报告移到别的文件夹,执行完jmeter脚本后,再把那些旧报告移回来(也可以不移回来,我这里是为了能从jenkins页面上看).