web pull to refresh

Tirez pour actualiser le Web 1.1

Il s'agit d'une traction pour actualiser l'implémentation du Web. Il se concentre sur les performances et la réactivité de l'UX au beurre pour se sentir aussi près d'une implémentation native que possible.

Essayez une démo | Lire le billet de blog

Usage

Il y a deux éléments principaux nécessaires, l'élément de contenu et l'élément Pull to Refresh UX. La démo utilise cette configuration, mais vous pouvez le modifier comme vous le souhaitez.

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

Cela fonctionnera très bien avec vos propres indicateurs de chargement ou à la flèche de traction, assurez-vous simplement qu'ils sont enveloppés dans l'élément que vous utilisez pour maintenir la traction pour actualiser UX. N'oubliez pas d'inclure le CSS si vous souhaitez utiliser une configuration visuelle similaire à la démo.

Pour que cela fonctionne, vous devrez charger à la fois Hammer.js et le script WPTR.js, puis initialiser le module WebPullToreFresh. Ajoutez ceci juste avant la balise du corps de clôture:

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

Vous devrez également fournir une fonction de chargement au moment de l'initiation. Cette fonction doit effectuer les pièces de chargement asynchrones dont vous avez besoin pour charger de nouveaux éléments et renvoyer une promesse.

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

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

Paramètres facultatifs

Il y a quelques paramètres facultatifs que vous pouvez transmettre à l'initialisation:

 {
	// 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
}

Essayez une démo | Lire le billet de blog