首页 » Framework7 » Framework7 组件
网站地图

下拉刷新

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

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

重置下拉刷新

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

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) 需要启用的下拉刷新