Framework7 - Actualizar

Descripción

Es un componente especial que se utiliza para actualizar (recargar) el contenido de la página tirando de él.

El siguiente código muestra cómo actualizar el contenido de la página:

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

Las siguientes clases se utilizan en la actualización:

  • page-content- Tiene una clase adicional de extracción para actualizar contenido y es necesaria para habilitar la extracción para actualizar.

  • pull-to-refresh-layer- Es una capa oculta, que se usa para tirar para refrescar el elemento visual y es solo un precargador y una flecha.

  • data-ptr-distance = "55" - Este es un atributo adicional que le permite establecer una distancia de activación personalizada para 'tirar para actualizar' y su valor predeterminado es 44px.

Tire para actualizar eventos

En 'Pull to Refresh' hay algunos eventos de JavaScript, que se dan en la siguiente tabla:

S. No Descripción del evento Objetivo
1

pullstart

Se activará cada vez que empiece a tirar para actualizar el contenido.

Tire para actualizar el contenido.

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

pullmove

Se activa cuando tira para actualizar el contenido.

Tire para actualizar el contenido.

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

pullend

Se activará cada vez que suelte la función de extracción para actualizar el contenido.

Tire para actualizar el contenido.

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

refresh

Este evento se activará cuando la extracción para actualizar ingrese en el estado "refrescante" .

Tire para actualizar el contenido.

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

refreshdone

Se activará después de que se actualice y vuelva al estado inicial. Esto se hará después de llamar al método pullToRefreshDone .

Tire para actualizar el contenido.

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

Hay métodos de la aplicación que se pueden usar con Pull to Refresh.

S. No Métodos y descripción de la aplicación
1

myApp.pullToRefreshDone(ptrContent)

Se utiliza para restablecer el contenido de extracción para actualizar .
2

myApp.pullToRefreshTrigger(ptrContent)

Se utiliza para activar la actualización en una extracción especificada para actualizar el contenido .
3

myApp.destroyPullToRefresh(ptrContent)

Se utiliza para destruir / deshabilitar la extracción para actualizar en la extracción especificada para actualizar el contenido .
4

myApp.initPullToRefresh(ptrContent)

Se utiliza para inicializar / habilitar la extracción para actualizar el contenido .

Donde ptrContent se usa para HTMLElement o cadena para tirar para actualizar el contenido para restablecer / activar o deshabilitar / habilitar.

Ejemplo

El siguiente ejemplo demuestra el uso del componente de actualización que inicia la actualización del contenido de una página:

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

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

  • Guarde el código HTML proporcionado anteriormente como pull_to_refresh.html archivo en la carpeta raíz de su servidor.

  • Abra este archivo HTML como http: //localhost/pull_to_refresh.html y el resultado se muestra como se muestra a continuación.

  • Cuando el usuario tira hacia abajo, la página se actualizará con el contenido.