web pull to refresh

Ziehen Sie, um für das Web 1.1 zu aktualisieren

Dies ist ein Pull, um die Implementierung für das Web zu aktualisieren. Es konzentriert sich auf die Leistung der Butter -UX -Leistung und die Reaktionsfähigkeit, um sich einer nativen Implementierung so nahe wie möglich zu fühlen.

Versuchen Sie eine Demo | Lesen Sie den Blog -Beitrag

Verwendung

Es sind zwei Kernelemente erforderlich, das Inhaltselement und das Zug, um das UX -Element zu aktualisieren. Die Demo verwendet dieses Setup, Sie können dies jedoch ändern, wie Sie möchten.

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

Dies funktioniert einwandfrei mit Ihren eigenen Ladeanzeigen oder dem Abziehen von Pfeil. Stellen Sie einfach sicher, dass sie in das Element eingewickelt sind, mit dem Sie den Zug halten, um den UX zu aktualisieren. Vergessen Sie nicht, das CSS aufzunehmen, wenn Sie ein ähnliches visuelles Setup wie die Demo verwenden möchten.

Damit dies funktioniert, müssen Sie sowohl Hammer.js als auch das WPTR.JS -Skript laden und dann das WebpulltorFresh -Modul initialisieren. Fügen Sie dies kurz vor dem Schlusskörper -Tag hinzu:

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

Sie müssen auch eine Ladefunktion zum Initialisierungszeit bereitstellen. Diese Funktion sollte die asynchronisierten Ladestücke ausführen, die Sie benötigen, um neue Elemente zu laden und ein Versprechen zurückzugeben.

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

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

Optionale Parameter

Es gibt einige optionale Parameter, die Sie in der Initialisierung weitergeben können:

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

Versuchen Sie eine Demo | Lesen Sie den Blog -Beitrag