下拉刷新

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

下拉刷新的demo

HTML:

下拉刷新

card
这里是第1个card,下拉刷新会出现第2个card。
{% highlight html %}

下拉刷新

card
这里是第1个card,下拉刷新会出现第2个card。
{% endhighlight %}

javascript:

{% highlight js %} // 添加'refresh'监听器 $(document).on('refresh', '.pull-to-refresh-content',function(e) { // 模拟2s的加载过程 setTimeout(function() { var cardNumber = $(e.target).find('.card').length + 1; var cardHTML = '
' + '
card'+cardNumber+'
' + '
' + '
' + '这里是第' + cardNumber + '个card,下拉刷新会出现第' + (cardNumber + 1) + '个card。' + '
' + '
' + '
'; $(e.target).find('.card-container').prepend(cardHTML); // 加载完毕需要重置 $.pullToRefreshDone('.pull-to-refresh-content'); }, 2000); }); {% endhighlight %}

其中

下拉刷新的行为顺序

当用户开始下拉的时候, 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”状态时触发

重置下拉刷新

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

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

JS触发下拉刷新

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

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

销毁/禁用下拉刷新

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

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

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

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