因为公司项目的需求，在H5界面上也要实现与原生系统相似的"下拉刷新，上拉加载"的效果。在网上发现mui的组件库已经实现了类似的功能。
代码实现也很简单， 我们可以从HBuilder中新建一个移动app工程，导入“Hello mui”模板。这个模板会生成很多examples，其中就包括下拉，上拉功能的源码。
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!--数据列表-->
</div>
</div>
↑ html部分主要代码
mui.init({
pullRefresh: {
container: '#pullrefresh',
down: {
callback: pulldownRefresh
},
up: {
contentrefresh: '正在加载...',
callback: pullupRefresh
}
}
});
/**
* 下拉刷新具体业务实现
*/
function pulldownRefresh() {
setTimeout(function() {
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
}, 1500);
}
var count = 0;
/**
* 上拉加载具体业务实现
*/
function pullupRefresh() {
setTimeout(function() {
mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
}, 1500);
}
↑ js部分主要代码
mui不开放源码，所以我也不清楚以上功能的实现原理。
