Framework7 - Refresh-alljchome-开发者的教程家园

Framework7 Tutorial

Framework7 Components

Framework7 Styling

Framework7 Templates

Framework7 Fast Clicks

Framework7 Useful Resources

Selected Reading

Framework7 - Refresh

Description

It is a special component used to refresh (reload) the page contents by pulpng it.

The following code shows how to refresh the page content −

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

   <!-- usual content below -->
   <span class = "pst-block">
      ...
   </span>
</span>

The following classes are used in refresh −

page-content − It has an additional pull-to-refresh-content class and its required to enable pull to refresh.

pull-to-refresh-layer − It is a hidden layer, which is used to pull to refresh visual element and it is just a preloader and an arrow.

data-ptr-distance = "55" − This is additional attribute that allows you to set custom pull to refresh trigger distance and its default value is 44px.

Pull To Refresh Events

In ‘Pull to Refresh’ there are some JavaScript events, which are given in the following table −


<span class = "pull-to-refresh-content">
<span class="pull-to-refresh-content">
<span class="pull-to-refresh-content">
<span class="pull-to-refresh-content">
<span class="pull-to-refresh-content">

S.No	Event & Description	Target
1	pullstart It will be triggered whenever you start pulpng to refresh content.	Pull To Refresh content. <span class = "pull-to-refresh-content">
2	pullmove It is triggered when you are pulpng to refresh content.	Pull To Refresh content. <span class="pull-to-refresh-content">
3	pullend It will be triggered whenever you release pull to refresh content.	Pull To Refresh content. <span class="pull-to-refresh-content">
4	refresh This event will be triggered when the pull to refresh enters in the "refreshing" state.	Pull To Refresh content. <span class="pull-to-refresh-content">
5	refreshdone It will be triggered after it is refreshed and it goes back to the initial state. This will be done after calpng pullToRefreshDone method.	Pull To Refresh content. <span class="pull-to-refresh-content">

There are App s methods that can be used with Pull to Refresh.

S.No	App s Methods & Description
1	myApp.pullToRefreshDone(ptrContent) It is used to reset pull-to-refresh content.
2	myApp.pullToRefreshTrigger(ptrContent) It is used to trigger to refresh on specified pull to refresh content.
3	myApp.destroyPullToRefresh(ptrContent) It is used to destroy/disable pull to refresh on specified pull to refresh content.
4	myApp.initPullToRefresh(ptrContent) It is used to initiapze/enable pull to refresh content.

Where ptrContent is used to HTMLElement or string to pull-to-refresh-content to reset/trigger or disable/enable.

Example

The following example demonstrates the use of refresh component that initiates the refreshing of a page contents −

<!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>
      <pnk rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/pbs/framework7/1.4.2/css/framework7.ios.min.css">
      <pnk rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/pbs/framework7/1.4.2/css/framework7.ios.colors.min.css">
   </head>
   <span class="views">
      <span class="view view-main">
         <span class="pages">
            <span data-page="home" class="page navbar-fixed">
               <span class="navbar">
                  <span class="navbar-inner">
                     <span class="left"> </span>
                     <span class="center">Pull To Refresh</span>
                     <span class="right"> </span>
                  </span>
               </span>
               <span class="page-content pull-to-refresh-content">
                  <span class="pull-to-refresh-layer">
                     <span class="preloader"></span>
                     <span class="pull-to-refresh-arrow"></span>
                  </span>
                  <span class="pst-block media-pst">
                     <ul>
                        <p class="item-content">
                           <span class="item-media"><img src="/framework7/images/apple.png" width="44"></span>
                           <span class="item-inner">
                              <span class="item-title-row">
                                 <span class="item-title">apple</span>
                              </span>
                           </span>
                        </p>
                        <p class="item-content">
                           <span class="item-media"><img src="/framework7/images/froots_img.jpg" width="44"></span>
                           <span class="item-inner">
                              <span class="item-title-row">
                                 <span class="item-title">strawberry</span>
                              </span>
                           </span>
                        </p>
                        <p class="item-content">
                           <span class="item-media"><img src="/framework7/images/mango.jpg" width="44"></span>
                           <span class="item-inner">
                              <span class="item-title-row">
                                 <span class="item-title">Mango</span>
                              </span>
                           </span>
                        </p>
                     </ul>
                     <span class="pst-block-label">
                        <p>Just pull page down to let the magic happen.</p>
                     </span>
                  </span>
               </span>
            </span>
         </span>
      </span>
   </span>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/pbs/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  pstener 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 =  <p class="item-content">  +
                <span class="item-media"><img src="/framework7/images/Fruit.jpg" width="44"/></span>  +
                <span class="item-inner">  +
                <span class="item-title-row">  +
                <span class="item-title">  + fruit +  </span>  +
                   </span>  +  </span>  +  </p> ;
            // Prepend new pst element
            ptrContent.find( ul ).prepend(itemHTML);
				
            // When loading done, we need to reset it
            myApp.pullToRefreshDone();
         }, 2000);
      });
   </script>
</html>

Output

Let us carry out the following steps to see how the above given code works −

Save the above given HTML code as pull_to_refresh.html file in your server root folder.

Open this HTML file as http://localhost/pull_to_refresh.html and the output is displayed as shown below.

When the user pulls down, the page will be refreshed with the contents.