移动端安卓和IOS开发框架Framework7教程-下拉刷新

下拉刷新是一个特别的组件，可以用来初始化页面内容的刷新。

下拉刷新的HTML布局结构

让我们来看一下如何把下拉刷新组件集成到页面中：

复制

其中：

当用户开始下拉的时候， pull-to-refresh-layer会增加一个额外的 pull-down 类。

当用户下拉使pull-to-refresh-content元素下降超过44px时(即pull-to-refresh-layer元素完全可视)，pull-to-refresh-layer元素将自动添加"pull-up"类，使箭头转向180度，以提醒用户界面将在他松开手指时刷新。

当用户在“pull-up”状态释放下拉区块使页面刷新时，pull-to-refresh-layer区块将会添加一个"refreshing"类。在“refreshing”状态，箭头将会隐藏，同时会展现一个加载提示符。这个时候你通常需要进行Ajax异步请求并刷新页面内容。

以下是下拉刷新的特殊事件，用以帮助我们识别需要刷新界面的时机：

事件（Event）对象（Target）描述（Description）

refresh	拥有下拉刷新功能的界面<div class="pull-to-refresh-content">	事件会在下拉刷新进入“refreshing”状态时触发

在我们刷新页面内容之后，需要重置下拉刷新组件，以使用户可以再次下拉：

myApp.pullToRefreshDone(ptrContent) - 重置特定的下拉刷新界面

我们也可以通过下面的方法手工触发下拉刷新:

myApp.pullToRefreshTrigger(ptrContent) - 触发特定界面的下拉刷新

<div class="page-content pull-to-refresh-content">
<div class="pull-to-refresh-layer">
<div class="preloader"></div>
<div class="pull-to-refresh-arrow"></div>
</div>
<div class="list-block media-list">
<ul>
<li class="item-content">
<div class="item-media"><img src="http://hhhhold.com/88/d/jpg?1" width="44"></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Yellow Submarine</div>
</div>
<div class="item-subtitle">Beatles</div>
</div>
</li>
...
</ul>
<div class="list-block-label">
<p>Just pull page down to let the magic happen.</p>
</div>
</div>
</div>

复制

var myApp = new Framework7();
var $$ = Dom7;
// 随意编造的内容
var songs = ['Yellow Submarine', 'Don\'t Stop Me Now', 'Billie Jean', 'Californication'];
var authors = ['Beatles', 'Queen', 'Michael Jackson', 'Red Hot Chili Peppers'];
// 下拉刷新页面
var ptrContent = $$('.pull-to-refresh-content');
// 添加'refresh'监听器
ptrContent.on('refresh', function (e) {
// 模拟2s的加载过程
setTimeout(function () {
// 随机图片
var picURL = 'http://hhhhold.com/88/d/jpg?' + Math.round(Math.random() * 100);
// 随机音乐
var song = songs[Math.floor(Math.random() * songs.length)];
// 随机作者
var author = authors[Math.floor(Math.random() * authors.length)];
// 列表元素的HTML字符串
var itemHTML = '<li class="item-content">' +
'<div class="item-media"><img src="' + picURL + '" width="44"/></div>' +
'<div class="item-inner">' +
'<div class="item-title-row">' +
'<div class="item-title">' + song + '</div>' +
'</div>' +
'<div class="item-subtitle">' + author + '</div>' +
'</div>' +
'</li>';
// 前插新列表元素
ptrContent.find('ul').prepend(itemHTML);
// 加载完毕需要重置
myApp.pullToRefreshDone();
}, 2000);
});

复制

myApp.destroyPullToRefresh(ptrContent) - 销毁/禁用下拉刷新

And if we need to initialize/enable it again:

然后我们可以再次初始化/启用它：

myApp.initPullToRefresh(ptrContent) - 初始化/启用下拉刷新