Framework7 - Actualiser

La description

C'est un composant spécial utilisé pour actualiser (recharger) le contenu de la page en le tirant.

Le code suivant montre comment actualiser le contenu de la page -

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

Les classes suivantes sont utilisées dans l’actualisation -

  • page-content- Il a une classe supplémentaire de contenu pull-to-refresh-content et est nécessaire pour permettre l'actualisation de pull-to-refresh.

  • pull-to-refresh-layer- C'est un calque caché, qui est utilisé pour tirer pour rafraîchir l'élément visuel et ce n'est qu'un préchargeur et une flèche.

  • data-ptr-distance = "55" - Il s'agit d'un attribut supplémentaire qui vous permet de définir une distance de déclenchement personnalisée «tirer pour actualiser» et sa valeur par défaut est 44px.

Tirer pour actualiser les événements

Dans 'Pull to Refresh', il y a quelques événements JavaScript, qui sont donnés dans le tableau suivant -

S. Non Description de l'évenement Cible
1

pullstart

Il sera déclenché chaque fois que vous commencerez à tirer pour actualiser le contenu.

Tirez pour actualiser le contenu.

<div class = "pull-to-refresh-content">
2

pullmove

Il est déclenché lorsque vous tirez pour actualiser le contenu.

Tirez pour actualiser le contenu.

<div class="pull-to-refresh-content">
3

pullend

Il sera déclenché chaque fois que vous relâchez pull pour actualiser le contenu.

Tirez pour actualiser le contenu.

<div class="pull-to-refresh-content">
4

refresh

Cet événement sera déclenché lorsque le pull pour rafraîchir entre dans l'état «rafraîchissement» .

Tirez pour actualiser le contenu.

<div class="pull-to-refresh-content">
5

refreshdone

Il sera déclenché après avoir été actualisé et il reviendra à l'état initial. Cela sera fait après l'appel de la méthode pullToRefreshDone .

Tirez pour actualiser le contenu.

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

Il existe des méthodes d'application qui peuvent être utilisées avec Pull to Refresh.

S. Non Méthodes et description de l'application
1

myApp.pullToRefreshDone(ptrContent)

Il est utilisé pour réinitialiser le contenu pull-to-refresh .
2

myApp.pullToRefreshTrigger(ptrContent)

Il est utilisé pour déclencher l'actualisation lors de l' extraction spécifiée pour actualiser le contenu .
3

myApp.destroyPullToRefresh(ptrContent)

Il est utilisé pour détruire / désactiver pull pour actualiser sur pull spécifié pour actualiser le contenu .
4

myApp.initPullToRefresh(ptrContent)

Il est utilisé pour initialiser / activer pull pour actualiser le contenu .

Où ptrContent est utilisé pour HTMLElement ou une chaîne pour extraire le contenu d'actualisation pour réinitialiser / déclencher ou désactiver / activer.

Exemple

L'exemple suivant illustre l'utilisation du composant d'actualisation qui lance l'actualisation du contenu d'une page -

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

Production

Exécutons les étapes suivantes pour voir comment fonctionne le code donné ci-dessus -

  • Enregistrez le code HTML ci-dessus sous pull_to_refresh.html fichier dans le dossier racine de votre serveur.

  • Ouvrez ce fichier HTML comme http: //localhost/pull_to_refresh.html et la sortie s'affiche comme indiqué ci-dessous.

  • Lorsque l'utilisateur descend, la page est actualisée avec le contenu.