具体操作见代码：

<!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. Autofs自动挂载探讨

    Autofs介绍: mount是用来挂载文件系统的,可以在系统启动的时候挂载也可以在系统启动后挂载.对于本地固定设 备,如硬盘可以使用mount挂载:而光盘.软盘.NFS.SMB等文件系统具有动态性, ...

  2. 日志级别的选择：Debug、Info、Warn、Error

    日志信息分类 1.等级由低到高:debug<info<warn<Error: 2.区别: debug 级别最低,可以随意的使用于任何觉得有利于在调试时更详细的了解系统运行状态的东东: ...

  3. c# 7.0 6.0 新语法

    1.参考地址:https://docs.microsoft.com/zh-cn/dotnet/csharp/tutorials/exploration/csharp-7?tutorial-step=5 ...

  4. React-propsType和defaultProps

    TodoItem.propTypes={ content:PropTypes.string, text:PropTypes.string.isRequired, handleDeleteItem:Pr ...

  5. 微信JSSDK使用步骤(用于在微信浏览器中自定义分享,分享到朋友圈，拍照，扫一扫等功能)

    一.使用JSSDK需要一个公众号(需要认证!): (1).把自己项目的服务器地址输入. (2).把MP_verify_m7Qp93BAuIGDWRVO.txt  文件下载下来,放到该服务器域名指向的根 ...

  6. CodeForces Round #549 Div.2

    A. The Doors 代码: #include <bits/stdc++.h> using namespace std; ; int N; , One = ; int a[maxn], ...

  7. win10设置操作备忘

    添加密码, 更改密码: Win键-->左侧用户图标-->更改帐户设置-->登陆选项-->添加密码 | 更改密码

  8. mysql 解压版安装

    1.官网下载压缩包 2.解压 3.配置环境变量 添加系统环境变量  MYSQL_HOME 值为解压的主目录,例如     D:\mysql-5.7.25-winx64 修改Path 环境变量,点击编辑 ...

  9. Oracle物化视图的创建及使用

    oracle物化视图 一.oracle物化视图基本概念  物化视图首先需要创建物化视图日志,  oracle依据用户创建的物化视图日志来创建物化视图日志表,  物化视图日志表的名称为mlog$_后面跟 ...

  10. deb包转化为rpm包

    deb文件格式本是ubuntu的安装文件,那么我想要在fedora中安装,需要把deb格式转化成rpm格式,我们用skype举例: 1.下载转换工具alien_8.78.tar.gz 2.deb转化成 ...