html5 pulltorefresh,【文档】mui.pullToRefresh插件

下拉刷新和上拉加载，是大部分应用中都会用到的功能。

mui结合html5plus的API，封装了一套可以在Android和iOS上实现的配置，详细参考mui相关文档。

为了方便开发wap站的开发者，mui还扩展了pullToRefresh插件。

依赖

mui.js

mui.pullToRefresh.js

mui.pullToRefresh.material.js

同样，和其它一些插件一样，在HBuilder中新建hello mui示例工程，或在在github上均可获取以上资源。

初始化组件

初始化方法

var pullToRefresh = mui(selector).pullToRefresh(options);

配置信息

下拉配置

down: {

callback: function(){} //下拉回调函数

}

目前下拉只有这一个配置项，下拉的动画是canvas绘制的，想调整的话需要修改mui.pullToRefresh.material.js中的相关代码。

上拉配置

up: {

callback: function(){}, //上拉回调，必填；

auto: false, //自动执行一次上拉加载，可选；

show: true, //显示底部上拉加载提示信息，可选；

contentinit: '上拉显示更多', //可以上拉提示信息

contentdown: '上拉显示更多', //上拉结束提示信息

contentrefresh: '正在加载...', //上拉进行中提示信息

contentnomore: '没有更多数据了' //上拉无更多信息时提示信息

}

常用API

下拉相关

手动触发下拉

pullToRefresh.pullDownLoading();

结束下拉

pullToRefresh.endPullDownToRefresh();

上拉相关

手动触发上拉

pullToRefresh.pullUpLoading();

结束上拉

pullToRefresh.endPullUpToRefresh(Boolean); //传true代表无更多信息，默认可不传；

禁用/开启组件

pullToRefresh.setStopped(Boolean);

刷新组件

上拉的操作，如果无更多信息后，调用结束上拉并且传true会禁用上拉。如果需要重新开启上拉，则需要刷新组件。

pullToRefresh.refresh(true);

结尾

附件中提供了一个简单的，使用mui.pullToRefresh制作的例子。多个选项卡的情景，请参考hello mui示例中的pullrefresh_with_tab.html。