web pull to refresh

Web 1.1のためにリフレッシュするためにプルします

これは、Webの実装を更新するためのプルです。バターのようなUXのパフォーマンスと応答性に焦点を当て、可能な限りネイティブの実装に近づいています。

デモを試してください|ブログ投稿を読んでください

使用法

必要な2つのコア要素があります。コンテンツ要素とPull to food UX要素があります。デモはこのセットアップを使用しますが、これを変更できます。

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

これは、独自のロードインジケーターまたはプルダウンアローで正常に機能します。これは、UXを更新するためにプルを保持するために使用している要素に包まれていることを確認してください。デモとして同様の視覚セットアップを使用する場合は、CSSを含めることを忘れないでください。

これを機能させるには、hammer.jsとwptr.jsスクリプトの両方をロードし、WebPulltoreFreshモジュールを初期化する必要があります。閉じるボディタグの直前にこれを追加します：

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

また、開始時に負荷機能を提供する必要があります。この関数は、新しいアイテムをロードするために必要なAsyncロードピースを実行し、約束を返す必要があります。

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

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

オプションのパラメーター

初期化を渡すことができるいくつかのオプションのパラメーターがあります。

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

デモを試してください|ブログ投稿を読んでください