Lillloading عبارة عن عملية سحب للهاتف المحمول وتحميل المزيد من المكونات. يعتمد بشكل أساسي على المكونات التي تم تطويرها على أساس ISCROLL.JS V5.1.2. يمكن للمكتبة الأساسية استخدام jQuery.js أو zepto.js لتشغيل عقدة DOM. حاليًا ، أستخدم Zepto.js كمكتبة أساسية لتشغيل DOM ، والوجود في شكل مكون إضافي jQuery. إذا كنت لا ترغب في استخدامه كمكون إضافي ، فأنت بحاجة فقط إلى نقل التحميل مباشرة إلى المكتبة التي تحتاجها ، فلا بأس بذلك. تم تصميم Listloading بشكل أساسي لمحطات المحمول. عند استخدام المتصفح ، يأتي مع التمرير. تجربة المستخدم غير ودية للغاية وتختلف تمامًا عن Android و iOS. لذلك ، يختار iscroll.js. تتمثل طريقة التنفيذ الخاصة به في استخدام الرسوم المتحركة CSS3 ترجمة تحويل ثنائي الأبعاد لتحقيق تأثير التمرير. تستخدم سمة التحويل تسارع الأجهزة ، وقد تم تحسين طريقة الأداء بشكل كبير.
تثبيت NPM
نسخة الكود كما يلي:
تثبيت NPM -g lloading
كيفية استخدامه على النحو التالي:
1. هيكل HTML
نفس هيكل ISCROLL الذي تم إنشاؤه ، ولكن يجب أن تحدد عقدة العنصر المحددة المعرف ، لأن الهوية المحددة مطلوبة لنشر وضع الاشتراك في المكون. نظرًا لأن iscroll يجب أن يضبط الارتفاع قبل إنشاء عنصر العقدة ، وإلا فلن يكون قابلاً للتمرير ؛ يتم إنشاء isCroll ويتم تعيينه للعنصر الطفل الأول للتمرير ، وبالتالي يتم إضافة تحديث الحمولة المنسدلة والمنسد إلى العنصر الأول. في الواقع ، فقط تخيل عنصر الطفل الأول كجسم في HTML.
2. JS التي يجب تقديمها
<script src = "../ src/jslib/zepto.min.js"> </script> <script src = "../ src/jslib/iscroll.js"> </cript> <script src = "../ build/liploading.js"> <script>
3. اتصل
var m = 3 ، n = 0 ؛ // يجب عليك تعيين ارتفاع العنصر الأصل قبل إنشاء isCroll ، وإلا لا يمكنك سحب isCroll $ ('#lloadloading'). الارتفاع ($ (window) .hight ()) Date (). المكون ... </li> '؛} return __html ؛} // يجب أن يكون المحدد معرفًا لأنه من الضروري استخدام اشتراك نشر على أنه معرف var lolloading = $ ('#lloadloading '). larloading ({disabletime: true ، // عرض الوقت المطلوب (cb) {cb) CreateHtml () ؛ if (m <1) {flg = true ؛} {$ ('#order-list'). إلحاق (__ html) CreateHTML () ؛ $ (#قائمة الطلبات). الفقاعات ، وتوصي أيضا كتابة طريقة النقر في حد ذاتها. إذا قمت بتمكين PrevEfault إلى خطأ ، فسيقوم هذا الخط بحل مشكلة فشل onclick. ومع ذلك ، إذا فتحت هذه القيمة وسحبها تحت WeChat ، فستكون هناك مشاكل. بعد انتهاء الشريحة ، لا يمكن تشغيل التمرير. لذلك قمت بتضمين طريقة حدث بنفسي listloading.evt ('li' ، 'click' ، function (dom) {// dom.remove () ؛ // $ ('#order-list'). append (createHtml ()) ؛ // listloading.refresh () ؛}) ؛رسم تخطيطي للتكاثر
/p>
4. API
4.1 انسحب لأسفل لتحديث
سيتم تنفيذ التهيئة مرة واحدة ، وذلك بشكل أساسي لإنشاء iscroll ، ثم يتم تنفيذ كل تحديث المنسدلة بعد نهاية كل تحديث المنسدلة. بعد تنفيذ البرنامج الخاص بك في الطريقة ، يجب تنفيذ وظيفة رد الاتصال لإبلاغ جميع البرامج التي تم تنفيذها ، وسيقوم Trildload تلقائيًا باستدعاء وظيفة تحديث ISCROLL ، ولا يتطلب رد الاتصال نقل المعلمة.
Options.PullDownAction = دالة (CB) {// سحب لأسفل إلى التحديث .... // بعد تنفيذ طريقة التنفيذ ، يجب تنفيذ رد الاتصال CB () ؛}4.2 سحب التحديث
يتم تنفيذ كل تحديث سحب بعد اكتمال التحديث. الشيء نفسه مطلوب لتنفيذ وظيفة رد الاتصال بعد تنفيذ البرنامج الخاص بك. مطلوب قيمة منطقية في رد الاتصال. إذا كان هذا صحيحًا ، فلماذا تم تحميله وتم سحبه إلى النهاية.
Options.pullupAction = function (cb) {// send-down refresh .... // بعد تنفيذ طريقة التنفيذ ، يجب أن يكون رد الاتصال صحيحًا للانسحاب إلى النهاية cb (true) ؛}4.3 تدمير الحمولة
نسخة الكود كما يلي:
listloading.destroy () ؛
4.4 تحديث lloading
إذا كانت هناك إضافات وحذف في عقدة منطقة التمرير ، فأنت بحاجة إلى استدعاء هذه الطريقة بعد اكتمال العملية.
نسخة الكود كما يلي:
listloading.refresh () ؛
4.5 ما إذا كنت تريد عرض القيمة الافتراضية الزمنية خاطئة
يعرض الانسحاب الحقيقي الوقت ، والوقت من آخر تحديث
نسخة الكود كما يلي:
Options.disableTime = صحيح
4.6 اسحب لتحديث النص
نسخة الكود كما يلي:
Options.uploadMoretxt = 'سحب لأعلى لتحديث النص "؛ // يمكنك وضع علامات HTML فيه
4.7 انسحب لأسفل لتحديث النص
نسخة الكود كما يلي:
Options.PullDrefreshtxt = "اسحب لأسفل لتحديث النص" ؛ // يمكنك وضع علامات HTML فيه
4.8 تحميل الأحرف الصينية
نسخة الكود كما يلي:
OptionS.LoadItRxt = 'يتم تحميل الأحرف الصينية' ؛ // يمكنك وضع علامات HTML فيه
4.9 إصدار نص التحديث
نسخة الكود كما يلي:
Options.RealTimetxt = 'إصدار تحديث النص' ؛ // يمكنك وضع علامات HTML في الداخل
4.10 تم تحميل جميع النصوص
نسخة الكود كما يلي:
Options.LoaderendTxt = "تم تحميل جميع النص" ؛ // يمكنك وضع علامات HTML فيه
4.12 تكوين ISCROLL
نسخة الكود كما يلي:
Options.isCrollOptions = {} ؛
ما ورد أعلاه هو مكون تحديث المحرك المحمول. آمل أن يكون ذلك مفيدًا للجميع. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر على الجميع في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!