mui上拉加载下拉刷新问题

mui是h5十大框架之一。很好用，但是针对不同的场景，文档的描述不够我们理解。

场景：通过mui的上拉加载更多数据，下拉刷新回刚刚进入当前页面的状态。笔者设置每次上拉就清空旧页面的内容，把新加载的10条数据渲染到页面上，当下拉时候，恢复到第一次加载的状态。

问题：当上拉加载的数据达到最多时候，通过

mui('#pullrefresh').pullRefresh().endPullupToRefresh(true)

设定不让继续上拉加载。然后当下拉刷新想要回复上拉加载，采用如下：

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

测试发现，没办法恢复上拉加载的功能。

 

笔者也尝试了用：

mui('#pullup-container').pullRefresh().refresh(true);

mui('#pullup-container').pullRefresh().disablePullupToRefresh();

mui('#pullup-container').pullRefresh().enablePullupToRefresh();

来做测试。但是只有当使用禁用和启动交互时候可以恢复，但是当刷新的时候，会自动执行一次上拉加载动作。所以这些方案都被笔者废弃了。针对上面这些，笔者又尝试如何不让mui再执行刷新动作时候不自动执行一次上拉加载动作，经过研究发现如下调用启用上拉功能的代码，就不会自动执行一次上拉加载的动作：

setTimeout("enablepull",1000);//延时至少1s，小于1s就不行。

function enablepull(){

mui('#pullup-container').pullRefresh().enablePullupToRefresh();

}

上面虽然可以解决，但是笔者还是觉得不好，又尝试了一种曲线救国的方式：

设定全局变量enablepull

每次获取结果之后都判断是否还有更多数据，如果没有更多，那么enablepull=false;

这样每次上拉之前做如下判断：

    if (!enablePullUp) {
        mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);
        mui.toast("没有更多数据了");
        return;
    }

成功解决问题。

附上笔者关于曲线解决问题的代码：

//作者是模拟实现分页的效果，只是只做了下一页（上拉加载），和回到第一页的效果（下拉刷新）
var pageNo = 1;
var pageSize = 6;
var enablePullUp = true;
$(document).ready(function(){
    mui('body').on('tap','a',function(){document.location.href=this.href;});
    //上拉加载下拉刷新初始化
    mui.init({
        pullRefresh: {
            container: '#pullrefresh',
            down: {
                style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
                color:'#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
                callback: billRefresh
            },
            up: {
                auto:false,
                contentrefresh: '正在加载...',
                contentnomore:'',
                callback: billLoad
            }
        },
        swipeBack:true, //启用右滑关闭功能
        beforeback: function(){
            //返回true，继续页面关闭逻辑
            return true;
        }
    });
});

/**
 * 上拉加载具体业务实现
 */
function billLoad() {
    if (!enablePullUp) {
        mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);
        mui.toast("没有更多数据了");
        return;
    }
    pageNo++;
    getBill();
    mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);
}

/**
 * 下拉刷新具体业务实现
 */
function billRefresh() {
    pageNo = 1;
    getBill();
    mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
}
function getBill() {
    $.ajax({
        url: 'url',
        data: {
            "pageNo": pageNo,
            "pageSize": pageSize,
            "other": other
        },
        success: function (result) {
            var items = result.rows;
          	//渲染代码省略
          	、、、、、
          	//渲染代码省略
          
            enablePullUp = items.length >= pageSize;
        },
        error: function (result) {
            mui('#pullrefresh').pullRefresh().endPullupToRefresh(false); //参数为true代表没有更多数据了。
            mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
            enablePullUp = false;
        }
    });
}