H5：实现下拉刷新，上拉加载效果

因为公司项目的需求，在H5界面上也要实现与原生系统相似的"下拉刷新，上拉加载"的效果。在网上发现mui的组件库已经实现了类似的功能。

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不开放源码，所以我也不清楚以上功能的实现原理。