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

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

下拉刷新的HTML布局结构

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

1. <div class="page">
2.   <!-- Page content应该拥有"pull-to-refresh-content"类 -->
3.   <div class="page-content pull-to-refresh-content" data-ptr-distance="55">
4.     <!-- 默认的下拉刷新层 -->
5.     <div class="pull-to-refresh-layer">
6.       <div class="preloader"></div>
7.       <div class="pull-to-refresh-arrow"></div>
8.     </div>
9.  
10.     <!-- 下面是正文 -->
11.     <div class="list-block">
12.       ...
13.     </div>
14.   </div>
15. </div>

复制

其中：

• page-content需要额外添加pull-to-refresh-content类，它会开启下拉刷新。
• pull-to-refresh-layer 平时隐藏的布局块，包含下拉刷新的可视元素：加载提示符和上/下箭头。
• data-ptr-distance="55" 可以配置下拉刷新的下拉距离. 默认是 44px.

下拉刷新的行为顺序

当用户开始下拉的时候， 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) - 重置特定的下拉刷新界面

• ptrContent - 我们想要重置的下拉刷新页面的HTML元素或CSS选择器

JS触发下拉刷新

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

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

• ptrContent - 我们想要触发的下拉刷新页面的HTML元素或CSS选择器

示例

1. <div class="page-content pull-to-refresh-content">
2.   <div class="pull-to-refresh-layer">
3.     <div class="preloader"></div>
4.     <div class="pull-to-refresh-arrow"></div>
5.   </div>
6.   <div class="list-block media-list">
7.     <ul>
8.       <li class="item-content">
9.         <div class="item-media"><img src="http://hhhhold.com/88/d/jpg?1" width="44"></div>
10.         <div class="item-inner">
11.           <div class="item-title-row">
12.             <div class="item-title">Yellow Submarine</div>
13.           </div>
14.           <div class="item-subtitle">Beatles</div>
15.         </div>
16.       </li>
17.       ...
18.     </ul>
19.     <div class="list-block-label">
20.       <p>Just pull page down to let the magic happen.</p>
21.     </div>
22.   </div>
23. </div>

复制

 

1. var myApp = new Framework7();
2.  
3. var $$ = Dom7;
4.  
5. // 随意编造的内容
6. var songs = ['Yellow Submarine', 'Don\'t Stop Me Now', 'Billie Jean', 'Californication'];
7. var authors = ['Beatles', 'Queen', 'Michael Jackson', 'Red Hot Chili Peppers'];
8.  
9. // 下拉刷新页面
10. var ptrContent = $$('.pull-to-refresh-content');
11.  
12. // 添加'refresh'监听器
13. ptrContent.on('refresh', function (e) {
14.     // 模拟2s的加载过程
15.     setTimeout(function () {
16.         // 随机图片
17.         var picURL = 'http://hhhhold.com/88/d/jpg?' + Math.round(Math.random() * 100);
18.         // 随机音乐
19.         var song = songs[Math.floor(Math.random() * songs.length)];
20.         // 随机作者
21.         var author = authors[Math.floor(Math.random() * authors.length)];
22.         // 列表元素的HTML字符串
23.         var itemHTML = '<li class="item-content">' +
24.                           '<div class="item-media"><img src="' + picURL + '" width="44"/></div>' +
25.                           '<div class="item-inner">' +
26.                             '<div class="item-title-row">' +
27.                               '<div class="item-title">' + song + '</div>' +
28.                             '</div>' +
29.                             '<div class="item-subtitle">' + author + '</div>' +
30.                           '</div>' +
31.                         '</li>';
32.         // 前插新列表元素
33.         ptrContent.find('ul').prepend(itemHTML);
34.         // 加载完毕需要重置
35.         myApp.pullToRefreshDone();
36.     }, 2000);
37. });

复制

  实例预览

销毁/禁用下拉刷新

有的时候你可能需要禁用下拉刷新。我们可以通过这个方法来做到：

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

• ptrContent - HTMLElement or string (CSS 选择器) 我们需要销毁/禁用的下拉刷新

And if we need to initialize/enable it again:

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

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

• ptrContent - HTMLElement or string (with CSS Selector) 需要启用的下拉刷新