web pull to refresh

Tire para actualizar para la web 1.1

Este es un impulso para actualizar la implementación para la web. Se centra en el rendimiento y la capacidad de respuesta de UX mantecoso para sentirse lo más cerca posible de una implementación nativa.

Prueba una demostración | Lea la publicación del blog

Uso

Se necesitan dos elementos centrales, el elemento de contenido y la extracción para actualizar el elemento UX. La demostración usa esta configuración, pero puede modificar esto como desee.

 <div id="ptr">
  <!-- Pull down arrow indicator -->
  <span class="genericon genericon-next"></span>

  <!-- CSS-based loading indicator -->
  <div class="loading">
    <span id="l1"></span>
    <span id="l2"></span>
    <span id="l3"></span>
  </div>
</div>

<div id="content">
  <!-- Content that should be draggable for refreshing goes in here -->
</div>

Esto funcionará bien con sus propios indicadores de carga o tire de la flecha, solo asegúrese de que estén envueltos en el elemento que está usando para sostener el tirón para actualizar UX. No olvide incluir el CSS si desea usar una configuración visual similar a la demostración.

Para que esto funcione, necesitará cargar tanto Hammer.js como el script wptr.js, e inicializar el módulo WebpullToreFresh. Agregue esto justo antes de la etiqueta de cuerpo de cierre:

 <script src="lib/hammer.2.0.4.js"></script>
<script src="lib/wptr.1.0.js"></script>

<script>
  window.onload = function() {
    WebPullToRefresh.init( {
      loadingFunction: exampleLoadingFunction
    } );
  };
</script>

También deberá proporcionar una función de carga en el momento de la iniciativa. Esta función debe realizar las piezas de carga Async que necesita para cargar nuevos elementos y devolver una promesa.

 var exampleLoadingFunction = function() {
  return new Promise( function( resolve, reject ) {
    // Run some async loading code here

    if ( /* if the loading worked */ ) {
      resolve();
    } else {
      reject();
    }
  } );
};

Parámetros opcionales

Hay algunos parámetros opcionales que puede transmitir en la inicialización:

 {
	// ID of the element holding dragable content area
	contentEl: 'content', 

	// ID of the element holding pull to refresh loading area
	ptrEl: 'ptr', 

	// Number of pixels of dragging down until refresh will fire
	distanceToRefresh: 70, 

  // The dragging resistance level, the higher the more you'll need to drag down.
  resistance: 2.5
}

Prueba una demostración | Lea la publicación del blog