Framework7 刷新/重新加载

2025年3月17日 | 阅读 3 分钟

刷新或重新加载是一个特殊的组件，用于通过下拉刷新（重新加载）页面内容。

语法

<div class = "page">
   <!-- Page content should have additional "pull-to-refresh-content" class -->
   <div class = "page-content pull-to-refresh-content" data-ptr-distance = "55">
      <!-- Default pull to refresh layer-->
      <div class = "pull-to-refresh-layer">
         <div class = "preloader"></div>
      <div class = "pull-to-refresh-arrow"></div>
   </div>

   <!-- usual content below -->
   <div class = "list-block">
      ...
   </div>
</div>

以下是刷新组件中使用的类列表

page-content: 它有一个额外的 pull-to-refresh-content 类，并且需要启用下拉刷新。

pull-to-refresh-layer: 这是一个隐藏层，用于下拉刷新视觉元素，它只是一个预加载器和一个箭头。

data-ptr-distance = "55": 这是一个附加属性，允许您设置自定义的“下拉刷新”触发距离，其默认值为 44px。

下拉刷新事件

以下是一些下拉刷新 JavaScript 事件的列表

索引	事件	描述	目标
1)	pullstart	只要您开始下拉刷新内容，就会触发此事件。	下拉刷新内容。
2)	pullmove	当您下拉刷新内容时，会触发此事件。	下拉刷新内容。
3)	pullend	只要您释放下拉刷新内容，就会触发此事件。	下拉刷新内容。
4)	refresh	当下拉刷新进入“刷新”状态时，将触发此事件。	下拉刷新内容。
5)	refreshdone	刷新完成后，它将返回到初始状态。这将在调用 pullToRefreshDone 方法后完成。	下拉刷新内容。

以下是可与下拉刷新一起使用的 App 方法列表

索引	方法	描述
1)	myApp.pullToRefreshDone(ptrContent)	它用于重置下拉刷新内容。
2)	myApp.pullToRefreshTrigger(ptrContent)	它用于触发对指定的下拉刷新内容进行刷新。
3)	myApp.destroyPullToRefresh(ptrContent)	它用于销毁/禁用对指定的下拉刷新内容进行刷新。
4)	myApp.initPullToRefresh(ptrContent)	它用于初始化/启用下拉刷新内容。

Framework7 刷新示例

让我们举一个例子来说明刷新组件的使用，该组件启动页面内容的刷新

<!DOCTYPE html>
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-status-bar-style" content="black">
      <title>Pull To Refresh</title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css">
   </head>
   <div class="views">
      <div class="view view-main">
         <div class="pages">
            <div data-page="home" class="page navbar-fixed">
               <div class="navbar">
                  <div class="navbar-inner">
                     <div class="left"> </div>
                     <div class="center">Pull To Refresh</div>
                     <div class="right"> </div>
                  </div>
               </div>
               <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="/framework7/images/apple.png" width="44"></div>
                           <div class="item-inner">
                              <div class="item-title-row">
                                 <div class="item-title">apple</div>
                              </div>
                           </div>
                        </li>
                        <li class="item-content">
                           <div class="item-media"><img src="/framework7/images/froots_img.jpg" width="44"></div>
                           <div class="item-inner">
                              <div class="item-title-row">
                                 <div class="item-title">strawberry</div>
                              </div>
                           </div>
                        </li>
                        <li class="item-content">
                           <div class="item-media"><img src="/framework7/images/mango.jpg" width="44"></div>
                           <div class="item-inner">
                              <div class="item-title-row">
                                 <div class="item-title">Mango</div>
                              </div>
                           </div>
                        </li>
                     </ul>
                     <div class="list-block-label">
                        <p>Just pull page down to see the magic happen.</p>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
   <script>
      var myApp = new Framework7();

var $$ = Dom7;

// Dummy Content
      var fruits = ['mango', 'orange', 'watermelon', 'banana'];
      // Pull to refresh content
      var ptrContent = $$('.pull-to-refresh-content');
      // Add 'refresh' listener on it
      ptrContent.on('refresh', function (e) {
         // Emulate 2s loading
         setTimeout(function () {
            var picURL = 'images/Fruit.jpg' + Math.round(Math.random() * 100);
            var fruit = fruits[Math.floor(Math.random() * fruits.length)];
            var itemHTML = '<li class="item-content">' +
               '<div class="item-media"><img src="/framework7/images/Fruit.jpg" width="44"/></div>' +
               '<div class="item-inner">' +
               '<div class="item-title-row">' +
               '<div class="item-title">' + fruit + '</div>' +
                  '</div>' + '</div>' + '</li>';
            // Prepend new list element
            ptrContent.find('ul').prepend(itemHTML);
				
            // When loading done, we need to reset it
            myApp.pullToRefreshDone();
         }, 2000);
      });
   </script>
</html>

立即测试

下一主题F7 通知