mui的上拉加载实现比较简单,检测5+ runtime提供的滚动条滚动到底事件(plusscrollbottom),显示“正在加载”提示-->开始加载业务数据-->隐藏"正在加载"提示。使用方式类似下拉刷新,首先、通过mui.init方法中pullRefresh参数配置上拉加载各项参数,如下:
mui.init({
pullRefresh : {
container:refreshContainer,//待刷新区域标识,querySelector能定位的css选择器均可,比如:id、.class等
up : {
contentrefresh : "正在加载...",//可选,正在加载状态时,上拉加载控件上显示的标题内容
contentnomore:'没有更多数据了',//可选,请求完毕若没有更多数据时显示的提醒内容;
callback :pullfresh-function //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
}
}
});
其次,根据具体业务编写加载函数,需要注意的是,加载完新数据后,需要执行endPullupToRefresh()方法;
function pullfresh-function() {
//业务逻辑代码,比如通过ajax从服务器获取新数据;
......
//注意,加载完新数据后,必须执行如下代码,true表示没有更多数据了,两个注意事项:
//1、若为ajax请求,则需将如下代码放置在处理完ajax响应数据之后
//2、注意this的作用域,若存在匿名函数,需将this复制后使用,参考hello mui中的代码示例;
this.endPullupToRefresh(true|false);
}
注意:
- 因为使用的是滚动到底事件,因此若当前页面内容过少,没有滚动条的话,就不会触发上拉加载
- 多次上拉加载后,若已没有更多数据可加载时,调用
this.endPullupToRefresh(true);
,之后滚动条滚动到底时,将不再显示“上拉显示更多”的提示语,而显示“没有更多数据了”的提示语; - 若实际业务中,有重新触发上拉加载的需求(比如当前类别已无更多数据,但切换到另外一个类别后,应支持继续上拉加载),此时调用上拉加载的重置函数即可,如下代码:
//pullup-container为在mui.init方法中配置的pullRefresh节点中的container参数;
mui('#pullup-container').pullRefresh().refresh(true);