عند تصفح صفحات الويب على الهواتف المحمولة ، غالبًا ما يتم استخدام وظيفة. عندما نتصفح JD أو Taobao ، تنزلق الصفحة إلى أسفل ونرى أن البيانات يتم تحميلها تلقائيًا في القائمة. لم أكن أعرف كيف تم تنفيذ هذه الوظائف من قبل ، لذلك قمت بمحاكاة وتطبيق هذه الوظائف على متصفح الكمبيوتر الخاص بي. دعونا نلقي نظرة على تأثير التصفح:
عندما يتم تمرير شريط التمرير إلى أسفل الصفحة ، يتم عرض المطالبة "التحميل ...".
عندما يتم تحميل الصفحة جميع البيانات ، فإن التمرير إلى أسفل الصفحة سيؤدي إلى "تم تحميل البيانات إلى النهاية":
عملية تنفيذ تحميل البيانات اللانهائي تقريبًا على النحو التالي:
1. تمرير أشرطة إلى أسفل الصفحة.
2. قم بتحويل تحميل Ajax وتحميل البيانات التي يتم إرجاعها بواسطة الطلب إلى القائمة.
كيف تروي ما إذا كان شريط التمرير يسير إلى أسفل الصفحة؟ يمكننا تعيين قاعدة: عندما يكون ارتفاع تمرير شريط التمرير أقل من 20 بكسل يختلف عن ارتفاع المستند بأكمله ، يُعتبر أن شريط التمرير قد تم تمريره إلى أسفل الصفحة:
ارتفاع المستند - ارتفاع المنفذ - شريط التمرير ارتفاع <20
لتحقيق مثل هذا الحكم من خلال الكود ، يجب أن نفهم أي رمز يتم الحصول عليه من المرتفعات المذكورة أعلاه؟ يمكنك الرجوع إلى مقال كتبته من قبل ، "HTML Element Coordinate Placation ، يجب عليك إتقان نقاط المعرفة هذه."
في الحكم أعلاه ، قمت بتغليف طريقة:
// الكشف عن ما إذا كان شريط التمرير يسير إلى أسفل وظيفة الصفحة isScrollTopagebottom () {// ارتفاع المستند var documentheight = document.documentElement.OffSetheight ؛ var viewPortheight = getViewPortSize (). h ؛ var scrollheight = window.pageyoffset || document.documentElement.scrolltop || document.body.scrolltop || 0 ؛ Return documentheight - ViewPortheight - Scrollheight <20 ؛ }بمجرد أن نحصل على الحكم ، يمكننا تشغيل مؤقت ومراقبته مرة واحدة في 900 مللي ثانية. إذا كان ISSCROLLTOPAGEBOTTOM () يرجع صحيحًا ، فاتصل بـ AJAX لطلب البيانات. إذا تم إرجاع خطأ ، فإنه يمر 900 مللي ثانية قبل المراقبة.
ما يلي هو تطبيق الكود الأساسي:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> infinite pagination </title> <link rel = "stylesheet" href = "assets/css/index.css src = "// cdn.bootcss.com/jquery/jquery/3.1.0/jquery.min.js"></script><script src =" js/jquery.mockjax.js "> </cript> <script type =" text/javaScript "src =" js/datamock.js " اكتب = "Text/JavaScript"> // كخصائص W و H الخاصة بكائن ، قم بإرجاع وظيفة حجم منفذ العرض getViewPortSize (w) {// استخدم النافذة المحددة ، إذا لم تكن هناك معلمة ، استخدم النافذة الحالية w = w || نافذة // باستثناء IE8 والإصدارات السابقة ، يمكن للمتصفحات الأخرى استخدام إذا (W.innerwidth! = null) return {w: w.innerwidth ، h: w.innerheight} ؛ // لـ IE (أو أي متصفح) في الوضع القياسي var d = w.document ؛ if (document.compatmode == "css1compat") return {w: d.documentElement.clientwidth ، h: d.documentElement.clientheight} ؛ // العودة إلى المتصفحات في وضع غريب {w: d.body.clientwidth ، h: d.body.clientheight} ؛ } // اكتشاف ما إذا كان شريط التمرير يسير إلى أسفل وظيفة الصفحة isScrollTopagebottom () {// ارتفاع المستند var documentheight = document.documentElement.offSetheight ؛ var viewPortheight = getViewPortSize (). h ؛ var scrollheight = window.pageyoffset || document.documentElement.scrolltop || document.body.scrolltop || 0 ؛ Return documentheight - ViewPortheight - Scrollheight <20 ؛ }. "</span> </viv>" + "<div class = 'info-address'> <span>" + goods.address + "</span> </viv>" + "<div class = 'info-bottom'>" + "<div class = 'info-price leftfloat'> <span> ￥" + owds.price + + Goods.Star + "الموصى بها </span> </viv>" + "<div class = 'info-more leftfloat'> <span> مزيد من المعلومات </span> </viv>" + "</div>" + "</div>" + "</li>" ؛ }. $ ("#list"). إلحاق (html) ؛ // تحميل وظيفة البيانات loadDatadynamic () {// أولاً ، أظهر أنه يتم تحميله إذا ($ ("#loadingli"). length === 0) $ ("#list"). إلحاق ("<li id = 'loadingli' class = 'loading'> loading ... </li>) ؛ آخر {$ ("#loadingli"). النص ("التحميل ..."). removeClass ("Space") ؛ } var loadingli = document.getElementById ("loadingli") ؛ loadingli.scrollintoview () ؛ // تحميل البيانات ، بعد تحميل البيانات ، تحتاج إلى إزالة موجه التحميل var hasdata = false ، msg = "" ؛ $ .ajax ("http: // localhost: 8800/loadData؟ sessionId =" + ( + تاريخ جديد)). تم (الوظيفة (النتيجة) {if (result.status) {if (result.data.length> 0) {hydata = true ؛ var html = " GetGoodplate (goods) ؛ SetTimeOut () } // إذا تم تمرير شريط التمرير إلى أسفل الصفحة ، فيجب تحميل بيانات جديدة ، ويتم عرض مطالبة التحميل watchscroll () {if (! isScrollTopageBottom ()) {setTimeOut (mancepitions.callee ، 900) ؛ يعود؛ } loadDatadynamic () ؛ } // ابدأ في اكتشاف watchscroll ()البيانات التي قمت محاكاة من خلال jQuery-mockjax في العرض التوضيحي. الرمز كما يلي:
/*** واجهة المحاكاة. */var i = 0 ، len = 200 ، adments = ["Sichuan" ، "Beijing" ، "Shanghai" ، "Guangzhou" ، "Shenzhen" ، "Gansu" ، "Yunnan" ، "Zhejiang" ، "Qinghai" ، "Guizhou" ؛ لـ (؛ i <size ؛ i ++) {arr.push ({name: "Apple" + (i ٪ 10 + 1) ، pic: arr ؛} $. mockjax ({url: 'http: // localhost: 8800/loadData*' ، mesponsetime: 1000 ، response: function (settings) {this.responsetext = {الحالة: true ، البيانات: getData ()}}}) ؛العرض التجريبي الكامل الكامل الذي قمت بتحميله إلى جيثب:
https://github.com/heavis/pageloader
العرض التوضيحي عبر الإنترنت:
https://heavis.github.io/pageloader/index.html
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.