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
}

جرب عرضًا تجريبيًا | اقرأ منشور المدونة