mui实现列表的下拉刷新上拉加载

1、引入mui控件的js文件和css样式文件

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

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

2、完善列表容器：.mui-scroll-wrapper为滚动容器，.mui-scroll为滚动主体，里边内容不限。

<div id="pullrefresh" class="mui-scroll-wrapper">

    <div class="mui-scroll">

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

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

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

        </ul>

    </div>

</div>

3、初始化mui控件：初始化会生成部分mui需要用到的控件，给容器和列表绑定事件。

mui.init({ 
 pullRefresh : {
　　 swipeBack: false, //关闭左滑关闭功能

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

    down : {

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

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

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

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

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

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

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

   },
　　up:{
　　　　contentrefresh: '正在加载...',
　　　　contentnomore:'没有更多数据了',
　　　　callback:pulluploading //上拉加载下一页
　　}

});

4、定义下拉刷新列表方法 pulldownRefresh()

mui.ajax("请求url", {

    type: "get",

    dataType: "json",

    data:{

            param:param,

            name:name

        },

        success: function(data){

             //将获取到的数据动态赋值给列表，假设scroller为滚动容器

             //如果数据不到一页，显示“没有更多数据了”,关闭上拉功能

             //scroller.endPullupToRefresh(true);

             //scroller.querySelector(".mui-pull-bottom-pocket .mui-pull-caption").innerHTML = "没有更多数据了";

             //如果对于关闭的上拉功能，可以通过以下语句重置上拉加载功能。

             //mui('#pullrefresh').pullRefresh().refresh(true);

        }

});  

5、定义上拉加载功能：pulluploading()该方法同下拉刷新相似。（最后一页关闭上拉加载、提示没有数据参考下拉刷新。）

6、多页数据提示：列表下方提示及下拉刷新效果

尾页页面效果：scroller.endPullupToRefresh(true);