Question

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

下拉刷新的demo

<header class="bar bar-nav">
    <h1 class='title'>下拉刷新</h1>
</header>
<!-- content应该拥有"pull-to-refresh-content"类,表示启用下拉刷新 -->
<div class="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="card-container">
        <div class="card">
            <div class="card-header">card</div>
            <div class="card-content">
                <div class="card-content-inner">
                    这里是第1个card，下拉刷新会出现第2个card。
                </div>
            </div>
        </div>
    </div>
</div>

// 添加'refresh'监听器
$(document).on('refresh', '.pull-to-refresh-content',function(e) {
    // 模拟2s的加载过程
    setTimeout(function() {
        var cardNumber = $(e.target).find('.card').length + 1;
        var cardHTML = '<div class="card">' +
                          '<div class="card-header">card'+cardNumber+'</div>' +
                          '<div class="card-content">' +
                            '<div class="card-content-inner">' +
                                '这里是第' + cardNumber + '个card，下拉刷新会出现第' + (cardNumber + 1) + '个card。' +
                            '</div>' +
                          '</div>' +
                      '</div>';

        $(e.target).find('.card-container').prepend(cardHTML);
        // 加载完毕需要重置
        $.pullToRefreshDone('.pull-to-refresh-content');
    }, 2000);
});

其中

• 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	拥有下拉刷新功能的界面	事件会在下拉刷新进入“refreshing”状态时触发

重置下拉刷新

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

$.pullToRefreshDone(ptrContent) // 重置特定的下拉刷新界面
//ptrContent  我们想要重置的下拉刷新页面的HTML元素或CSS选择器

JS触发下拉刷新

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

$.pullToRefreshTrigger(ptrContent) //触发特定界面的下拉刷新
ptrContent //我们想要触发的下拉刷新页面的HTML元素或CSS选择器

销毁/禁用下拉刷新

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

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

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

$.initPullToRefresh(ptrContent) - 初始化/启用下拉刷新
ptrContent - HTMLElement or string (with CSS Selector) 需要启用的下拉刷新