Framework7 Refresh / Reload

Refresh or reload is a special component used to refresh (reload) the page contents by pulling it.

Syntax:

  <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>  

Following is a list of classes used in refresh component:

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

Following is a list of some Pull to Refresh JavaScript events:

Index	Event	Description	Target
1)	pullstart	It will be triggered whenever you start pulling to refresh content.	Pull To Refresh content.
2)	pullmove	It is triggered when you are pulling to refresh content.	Pull To Refresh content.
3)	pullend	It will be triggered whenever you release pull to refresh content.	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.
5)	refreshdone	It will be triggered after it is refreshed and it goes back to the initial state. This will be done after calling pullToRefreshDone method.	Pull To Refresh content.

Following is a list of App’s methods that can be used with Pull to Refresh:

Index	Method	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 initialize/enable pull to refresh content.

Framework7 Refresh Example

Let’s take an example to demonstrate 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>        <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>

Test it Now

Next TopicF7 Notifications

Framework7 Refresh

Framework7 Refresh / Reload

Pull to refresh Events

Framework7 Refresh Example

AdMob with Firebase

Godot Tutorial

You may also like