关于mui上拉加载遇到的一些问题

每次开发总是会遇到一些相似的问题，每次遇到总是要查阅好多资料，费时又费力。

好记性不如烂笔头，记录下来保存到磁盘中吧，可是每次总是在如山的资料中反照效率也是不高。还是博客记录查阅更方便些。好了废话不多说开始今天的问题记录吧！

在开发app的过程中，使用的mui是一个不错的框架，其中上拉加载也是一个使用率比较高的。上拉加载分为单页上拉加载和tab页上拉加载，其中单页的上拉加载还好说，tab页的问题就比较多了，尤其是在停用上拉加载然后在启用的时候，下面分别来说一下单页和tab页上拉加载的初始化以及重启上拉加载。

1.单页模式

  1.1.上拉加载初始化：通过mui.init方法中pullRefresh参数配置上拉加载各项参数，如下

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

  1.2.结束上拉加载

　　当全部数据加载完之后就需要结束上拉加载（总不能一致加载数据吧），该怎么操作呢，其实很简单只需要在回调函数 pullfresh-function 中调用 endPullupToRefresh() 即可，如下：

function pullfresh-function() {
     //业务逻辑代码，比如通过ajax从服务器获取新数据；
     ......
     //注意：
     //1、加载完新数据后，必须执行如下代码，true表示没有更多数据了：
     //2、若为ajax请求，则需将如下代码放置在处理完ajax响应数据之后
     this.endPullupToRefresh(true|false);
}

    这个方法有一个参数为布尔类型，不写默认是false，其作用是：若还有更多数据，则传入false; 否则传入true，之后滚动条滚动到底时，将不再显示“上拉显示更多”的提示语，而显示“没有更多数据了”的提示语；

　1.3.重置上拉加载

　　若部分业务中，有重新触发上拉加载的需求（比如当前类别已无更多数据，但切换到另外一个类别后，应支持继续上拉加载），此时调用.refresh(true)方法，可重置上拉加载控件，如下代码：

//pullup-container为在mui.init方法中配置的pullRefresh节点中的container参数；
//注意：refresh()中需传入true
mui('#pullup-container').pullRefresh().refresh(true);

这里需要注意：因初始化时使用的时 mui.init({pullRefresh:{}})，所以这里重置上拉加载时也需要 pullRefresh().refresh(true)

2.tab页模式

　一般mui开发tab页使用最多的时slider组件（既可以用于tab页也可做图片轮播，功能还是比较优秀的）。当多个tab页都需要开启上拉加载时使用方式1进行初始化就有点不切实际了，那该怎么弄呢，请看一下文字

　2.1.初始化上拉加载

mui.each(document.querySelectorAll('.mui-scroll'), function(i, item) {
                mui(item).pullToRefresh({
                    up: {
                        height:50,//可选.默认50.触发上拉加载拖动距离
                        auto:true,//可选,默认false.自动上拉加载一次
                        contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
                        contentnomore: '没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
                        callback: function() {
                            var self = this
                            setTimeout(function() { // 加个延时，会显示 正在加载...
                                loadData(item) // 自己的业务逻辑
                                self.endPullUpToRefresh(); // 要执行一下，会在最下面显示 上拉加载更多
                            }, 500)
                        }
                    }
                })
            })

　　会有人说这不和方式一的初始化差不多嘛，确实，但是也是最容易出问题的，请看这里初始化使用的是 mui().pullToRefresh()，而方式一使用的是 mui.init({pullRefresh:{}})。这里先卖个关子，咱们继续往下看

　2.2.结束上拉加载

　　其实和方式一的相类似，也是在回调函数中调用 endPullUpToRefresh()（注意呦这里的 U 是大写的），但是调用方式有所不同，请看：

function loadData(ele) {
    // ele为启用上拉加载的滚动区域的html元素
     //业务逻辑代码，比如通过ajax从服务器获取新数据；
     ......
     //注意：
     //1、加载完新数据后，必须执行如下代码，true表示没有更多数据了：
     //2、若为ajax请求，则需将如下代码放置在处理完ajax响应数据之后
     mui(ele).pullToRefresh().endPullUpToRefresh(true|false);
}

　2.3.重置上拉加载

　　同理也和方式一相类似，但是调用方式不同：

// pullup-container为使用mui(item).pullToRefresh()初始化时item所对应的html元素选择器，需要重置哪个就写哪个的；
// 注意：这里使用的是 pullToRefresh()。refresh()中需传入true
mui('#pullup-container').pullToRefresh().refresh(true);

通过以上，想必大家也有所发现了，

单页模式使用的是 pullRefresh，所以结束和重置上拉加载时都需要 pullRefresh() 来分别调用：mui(ele).pullRefresh().endPullupToRefresh(true|false)，mui(ele).pullRefresh().refresh(true)；

而tab页模式下使用的是 pullToRefresh() 初始化的，所以呦结束和重置时就需要 pullToRefresh() 来分别调用：mui(ele).pullToRefresh().endPullUpToRefresh(true|false)，mui(ele).pullToRefresh().refresh(true)。

当然，下拉刷新也是同理，由于此次本人暂未使用到，就留待大家开发研究了！

最后，要想使用上拉加载有些代码还是必不可少的：

mui('.mui-scroll-wrapper').scroll({
    bounce: true, // 是否启用回弹
    indicators: true, //是否显示滚动条
    deceleration: 0.0006 //阻尼系数,系数越小滑动越灵敏，默认0.0006
});

页面都滚动不起来如何进行上拉加载呢！！！

关于复杂tab标签页滚动与上拉加载的问题可参考本人记录的另一篇博文  基于mui的标签页的上拉加载问题再升级-页面嵌套双滚动+标签页动态加载+上拉加载

每天进步一点点，点滴记录，积少成多。

以此做个记录，

如有不足之处还望多多留言指教！