web pull to refresh

Puxe para atualizar para a Web 1.1

Esta é uma atração para atualizar a implementação da Web. Ele se concentra no desempenho do UX amanteigado e na capacidade de resposta para se sentir o mais próximo possível de uma implementação nativa.

Experimente uma demonstração | Leia a postagem do blog

Uso

Existem dois elementos centrais necessários, o elemento de conteúdo e a tração para atualizar o elemento UX. A demonstração usa essa configuração, mas você pode modificar isso como desejar.

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

Isso funcionará muito bem com seus próprios indicadores de carregamento ou puxará a seta para baixo, apenas verifique se eles estão envolvidos no elemento que você está usando para segurar a tração para atualizar o UX. Não se esqueça de incluir o CSS se você quiser usar uma configuração visual semelhante como a demonstração.

Para que isso funcione, você precisará carregar o script Hammer.js e o WPTR.JS e inicializar o módulo WebPulntoreFresh. Adicione isso pouco antes da tag corporal de fechamento:

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

Você também precisará fornecer uma função de carregamento no horário de iniciação. Essa função deve executar as peças de carregamento assíncrono necessário para carregar novos itens e retornar uma promessa.

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

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

Parâmetros opcionais

Existem alguns parâmetros opcionais que você pode passar na inicialização:

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

Experimente uma demonstração | Leia a postagem do blog