移动端安卓和IOS开发框架Framework7教程-下拉刷新

来源:  2018-04-10 21:07:11    评论:0点击:

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

下拉刷新的HTML布局结构

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

  1. <div class="page">
  2.   <!-- Page content应该拥有"pull-to-refresh-content"类 -->
  3.   <div class="page-content pull-to-refresh-content" data-ptr-distance="55">
  4.     <!-- 默认的下拉刷新层 -->
  5.     <div class="pull-to-refresh-layer">
  6.       <div class="preloader"></div>
  7.       <div class="pull-to-refresh-arrow"></div>
  8.     </div>
  9.  
  10.     <!-- 下面是正文 -->
  11.     <div class="list-block">
  12.       ...
  13.     </div>
  14.   </div>
  15. </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选择器

示例

  1. <div class="page-content pull-to-refresh-content">
  2.   <div class="pull-to-refresh-layer">
  3.     <div class="preloader"></div>
  4.     <div class="pull-to-refresh-arrow"></div>
  5.   </div>
  6.   <div class="list-block media-list">
  7.     <ul>
  8.       <li class="item-content">
  9.         <div class="item-media"><img src="http://hhhhold.com/88/d/jpg?1" width="44"></div>
  10.         <div class="item-inner">
  11.           <div class="item-title-row">
  12.             <div class="item-title">Yellow Submarine</div>
  13.           </div>
  14.           <div class="item-subtitle">Beatles</div>
  15.         </div>
  16.       </li>
  17.       ...
  18.     </ul>
  19.     <div class="list-block-label">
  20.       <p>Just pull page down to let the magic happen.</p>
  21.     </div>
  22.   </div>
  23. </div>
复制

 

  1. var myApp = new Framework7();
  2.  
  3. var $$ = Dom7;
  4.  
  5. // 随意编造的内容
  6. var songs = ['Yellow Submarine', 'Don\'t Stop Me Now', 'Billie Jean', 'Californication'];
  7. var authors = ['Beatles', 'Queen', 'Michael Jackson', 'Red Hot Chili Peppers'];
  8.  
  9. // 下拉刷新页面
  10. var ptrContent = $$('.pull-to-refresh-content');
  11.  
  12. // 添加'refresh'监听器
  13. ptrContent.on('refresh', function (e) {
  14.     // 模拟2s的加载过程
  15.     setTimeout(function () {
  16.         // 随机图片
  17.         var picURL = 'http://hhhhold.com/88/d/jpg?' + Math.round(Math.random() * 100);
  18.         // 随机音乐
  19.         var song = songs[Math.floor(Math.random() * songs.length)];
  20.         // 随机作者
  21.         var author = authors[Math.floor(Math.random() * authors.length)];
  22.         // 列表元素的HTML字符串
  23.         var itemHTML = '<li class="item-content">' +
  24.                           '<div class="item-media"><img src="' + picURL + '" width="44"/></div>' +
  25.                           '<div class="item-inner">' +
  26.                             '<div class="item-title-row">' +
  27.                               '<div class="item-title">' + song + '</div>' +
  28.                             '</div>' +
  29.                             '<div class="item-subtitle">' + author + '</div>' +
  30.                           '</div>' +
  31.                         '</li>';
  32.         // 前插新列表元素
  33.         ptrContent.find('ul').prepend(itemHTML);
  34.         // 加载完毕需要重置
  35.         myApp.pullToRefreshDone();
  36.     }, 2000);
  37. });
复制

  实例预览

销毁/禁用下拉刷新

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

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

 

为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权