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
}

尝试演示|阅读博客文章