语言: 英文中文

下拉刷新

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

下拉刷新的HTML布局结构

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

<div class="page">
  <!-- Page content应该拥有"pull-to-refresh-content"类 -->
  <div class="page-content pull-to-refresh-content" data-ptr-distance="55">
    <!-- 默认的下拉刷新层 -->
    <div class="pull-to-refresh-layer">
      <div class="preloader"></div>
      <div class="pull-to-refresh-arrow"></div>
    </div>
 
    <!-- 下面是正文 -->
    <div class="list-block">
      ...
    </div>
  </div>
</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)
pullstart Pull To Refresh content<div class="pull-to-refresh-content"> Event will be triggered when you start to move pull to refresh content
pullmove Pull To Refresh content<div class="pull-to-refresh-content"> Event will be triggered during you move pull to refresh content
pullend Pull To Refresh content<div class="pull-to-refresh-content"> Event will be triggered when you release pull to refresh content
refresh refreshdone Pull To Refresh content<div class="pull-to-refresh-content"> Event will be triggered after pull to refresh is done and it is back to initial state (after calling pullToRefreshDone method)

Reset Pull To Refresh

After we refreshed page content, we need to reset pull to refresh component to let user pull it again:

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

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

JS触发下拉刷新

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

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

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

示例

<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) - 销毁/禁用 下拉刷新

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

And if we need to initialize/enable it again:

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

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

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