web pull to refresh

Потянуть, чтобы обновить для Интернета 1.1

Это притяжение, чтобы обновить реализацию для Интернета. Он фокусируется на маслянистой производительности UX и отзывчивости, чтобы чувствовать себя как можно ближе к нативной реализации.

Попробуйте демо | Прочитайте сообщение в блоге

Использование

Есть два основных элемента: элемент содержимого и элемент Pull, чтобы обновить 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
}

Попробуйте демо | Прочитайте сообщение в блоге