下拉刷新是一个特别的组件,可以用来初始化页面内容的刷新。
HTML:
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 = '其中
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 | 拥有下拉刷新功能的界面
|
事件会在下拉刷新进入“refreshing”状态时触发 |
在我们刷新页面内容之后,需要重置下拉刷新组件,以使用户可以再次下拉:
{% highlight html %} $.pullToRefreshDone(ptrContent) // 重置特定的下拉刷新界面 //ptrContent 我们想要重置的下拉刷新页面的HTML元素或CSS选择器 {% endhighlight %}我们也可以通过下面的方法手工触发下拉刷新:
{% 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 %}