mui的下拉刷新和上拉加载

代码定义：

var refresh = function(){
    mui.init({
        pullRefresh : {
            container:'#refreshContainer',//下拉刷新容器标识，querySelector能定位的css选择器都可，好比：id、.class等
            down : {
                height:50,//可选,默认50.触发下拉刷新拖动距离,
                auto: false,//可选,默认false.自动下拉刷新一次
                contentdown : "下拉能够刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
                contentover : "释放当即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
                contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
                callback : function() { //必选，刷新函数，根据具体业务来编写，好比经过ajax从服务器获取新数据
                  /*
 　　　　　　　　　　　　...
                    clock_data.content();
　　　　　　　　　　　　*/
                    mui('#refreshContainer').pullRefresh().refresh(true);
                    mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
                }
            },
            up : {
                height:50,//可选.默认50.触发上拉加载拖动距离
                auto:false,//可选,默认false.自动上拉加载一次
                contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
                //contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
                callback : function(){  //必选，刷新函数，根据具体业务来编写，好比经过ajax从服务器获取新数据；
                    /*...*/
                    mui('#refreshContainer').pullRefresh().refresh(true);
                    mui('#refreshContainer').pullRefresh().endPullupToRefresh();
                }
            }
        }
    });
}

//执行

refresh （）；

一、下拉刷新

mui.init({ pullRefresh : { 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 :function //必选，刷新函数，根据具体业务来编写，好比经过ajax从服务器获取新数据； } } });

刷新比较简单，在一个页面中的不一样类目之间，在上拉以后到另外一个类目时，能够执行

使滚动列表跳到顶部。

二、上拉加载mui('#pullrefresh').pullRefresh().scrollTo(0,0,0)

mui.init({ pullRefresh : { container:refreshContainer,//待刷新区域标识，querySelector能定位的css选择器都可，好比：id、.class等 up : { height:50,//可选.默认50.触发上拉加载拖动距离 auto:true,//可选,默认false.自动上拉加载一次 contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容 contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容； callback :pullfresh-function //必选，刷新函数，根据具体业务来编写，好比经过ajax从服务器获取新数据； } } });

（1）加载完新数据后，是否还有更多数据；若还有更多数据，则传入false; 不然传入true，以后滚动条滚动到底时，将再也不显示“上拉显示更多”的提示语，而显示“没有更多数据了”的提示语。

　　　　mui('#refreshContainer').pullRefresh().endPullupToRefresh(false);

（2）在一个页面的不一样类目之间切换时，特别是在通过上拉加载以后，重置加载尤其重要，不然可能将出现上拉不动的bug：

refreshContainer　　　　mui('#').pullRefresh().refresh(true);

 

补充：
1.禁用上拉加载：mui('#refreshContainer').pullRefresh().disablePullupToRefresh();
2.启用上拉加载：mui('#refreshContainer').pullRefresh().enablePullupToRefresh();