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