web pull to refresh

拉動刷新Web 1.1

這是刷新網絡實現的吸引力。它專注於黃油的UX性能和響應能力，使其感覺盡可能接近本地實施。

嘗試演示|閱讀博客文章

用法

需要兩個核心元素，即內容元素和刷新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>

您還需要在開始時提供一個加載功能。此功能應執行您加載新物品所需的異步加載件，然後返回承諾。

 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
}

嘗試演示|閱讀博客文章