上拉加载

MUI HTML5

MUI

上拉加载

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);