关于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的标签页的上拉加载问题再升级-页面嵌套双滚动+标签页动态加载+上拉加载
每天进步一点点，点滴记录，积少成多。
以此做个记录，
如有不足之处还望多多留言指教！
