web pull to refresh

Tarik untuk menyegarkan ke web 1.1

Ini adalah tarikan untuk menyegarkan implementasi untuk web. Ini berfokus pada kinerja mentega UX dan responsif untuk merasa sedekat mungkin dengan implementasi asli.

Coba demo | Baca posting blog

Penggunaan

Ada dua elemen inti yang diperlukan, elemen konten dan tarikan untuk menyegarkan elemen UX. Demo menggunakan pengaturan ini, tetapi Anda dapat memodifikasi ini sesuai keinginan Anda.

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

Ini akan bekerja dengan baik dengan indikator pemuatan Anda sendiri atau menarik panah, pastikan mereka dibungkus dengan elemen yang Anda gunakan untuk menahan tarikan untuk menyegarkan UX. Jangan lupa untuk memasukkan CSS jika Anda ingin menggunakan pengaturan visual yang serupa dengan demo.

Agar ini berfungsi, Anda harus memuat skrip Hammer.js dan WPTR.JS, dan kemudian menginisialisasi modul WebPullToRefresh. Tambahkan ini sebelum tag bodi penutup:

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

Anda juga perlu memberikan fungsi pemuatan pada waktu inisialisasi. Fungsi ini harus melakukan potongan pemuatan async yang Anda butuhkan untuk memuat item baru, dan mengembalikan janji.

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

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

Parameter opsional

Ada beberapa parameter opsional yang dapat Anda lewati pada inisialisasi:

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

Coba demo | Baca posting blog