在mui框架中上拉加载其实很简单了,框架已经帮助我们基本实现了。

mui的上拉加载和下拉刷新类似,都属于pullRefresh插件,使用过程如下:


1、页面滚动到底,显示“正在加载...”提示(mui框架提供)
2、执行加载业务数据逻辑(开发者提供)
3、加载完毕,隐藏"正在加载"提示(mui框架提供)
开发者只需关心业务逻辑,实现加载更多数据即可。


初始化

初始化方法类似下拉刷新,通过mui.init方法中pullRefresh参数配置上拉加载各项参数,如下:

mui.init({
	swipeBack: false, //禁用右滑关闭功能
	pullRefresh: {
		container: '#pullrefresh_route',
		up: {
			contentrefresh: '正在加载...',
			callback: pullupRefresh,
			contentnomore: '没有更多数据了',

		}
	}

});

pullRefresh是mui框架带有的上拉加载插件,container对应的是document中的某一个标签,比如:<div>,callback是业务功能函数(自定义函数)

业务逻辑

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

nomore
Type: Boolean
是否还有更多数据;若还有更多数据,则传入false; 否则传入true,之后滚动条滚动到底时,将不再显示“上拉显示更多”的提示语,而显示“没有更多数据了”的提示语;

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


//pullup-container为在mui.init方法中配置的pullRefresh节点中的container参数;
//注意:refresh()中需传入true
mui('#pullup-container').pullRefresh().refresh(true);
禁用上拉刷新
在部分场景下希望禁用上拉加载,比如在列表数据过少时,不想显示“上拉显示更多”、“没有更多数据”的提示语,开发者可以通过调用disablePullupToRefresh()方法实现类似需求,代码如下:


//pullup-container为在mui.init方法中配置的pullRefresh节点中的container参数;
mui('#pullup-container').pullRefresh().disablePullupToRefresh();
启用上拉刷新
使用disablePullupToRefresh()方法禁用上拉加载后,可通过enablePullupToRefresh()方法再次启用上拉加载,代码如下:


//pullup-container为在mui.init方法中配置的pullRefresh节点中的container参数;
mui('#pullup-container').pullRefresh().enablePullupToRefresh();