web pull to refresh

ดึงเพื่อรีเฟรชสำหรับเว็บ 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
}

ลองสาธิต | อ่านโพสต์บล็อก