Saat menjelajahi halaman web di ponsel, fungsi sering digunakan. Saat kami menelusuri JD atau Taobao, halaman meluncur ke bawah dan kami melihat bahwa data secara otomatis dimuat ke dalam daftar. Saya tidak tahu bagaimana fungsi -fungsi ini diimplementasikan sebelumnya, jadi saya mensimulasikan dan mengimplementasikan fungsi -fungsi seperti itu di browser PC saya. Mari kita lihat efek penelusuran:
Ketika scrollbar menggulir ke bagian bawah halaman, prompt "memuat ..." ditampilkan.
Ketika halaman memiliki semua data dimuat, menggulir ke bagian bawah halaman akan meminta "data telah dimuat ke akhir":
Proses penerapan pemuatan data tak terbatas secara kasar sebagai berikut:
1. Gulir bilah ke bagian bawah halaman.
2. Memicu pemuatan AJAX dan memuat data yang dikembalikan berdasarkan permintaan ke daftar.
Bagaimana cara mengetahui apakah scrollbar menggulir ke bagian bawah halaman? Kita dapat menetapkan aturan: Ketika ketinggian gulir bilah gulir kurang dari 20 piksel berbeda dari ketinggian seluruh dokumen, dianggap bahwa bilah gulir telah digulir ke bagian bawah halaman:
Tinggi Dokumen - Tinggi Viewport - Gulir Gulir Tinggi <20
Untuk mencapai penilaian seperti itu melalui kode, kita harus memahami kode mana ketinggian di atas diperoleh? Anda dapat merujuk ke artikel yang saya tulis sebelumnya, "Posisi Koordinat Elemen HTML, Anda harus menguasai poin -poin pengetahuan ini."
Dalam penilaian di atas, saya merangkum metode:
// Deteksi apakah scrollbar menggulir ke bagian bawah fungsi halaman isscrolltopageBottom () {// document tinggi 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; }Setelah kami memiliki penilaian, kami dapat menyalakan timer dan memantau sekali dalam 900 milidetik. Jika IssCrollTopageBottom () mengembalikan true, hubungi Ajax untuk meminta data. Jika False dikembalikan, melewati 900 milidetik sebelum pemantauan.
Berikut ini adalah implementasi kode inti:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <itement> Pagination Infinite </title> <link rel = "stylesheet" href = "aset/css/index.css"/</head> </head> <body> <v script> <uld = " src = "// cdn.bootcss.com/jQuery/3.1.0/jquery.min.js"></script><cript src =" js/jQuery.mockjax.js "> </skrip/script =" Text/JavaScript "src =" js/datamock. " Properti W dan H objek, kembalikan fungsi ukuran viewport getViewportSize (w) {// Gunakan jendela yang ditentukan, jika tidak ada parameter, gunakan jendela saat ini w = w || jendela; // kecuali untuk IE8 dan versi sebelumnya, browser lain dapat menggunakan if (w.innerwidth! = Null) return {w: w.innerwidth, h: w.innerheight}; // untuk IE (atau browser apa pun) dalam mode standar var d = W.Document; if (document.compatmode == "css1compat") return {w: d.documentelement.clientwidth, h: d.documentelement.clientHeight}; // kembali ke browser dalam mode aneh {w: d.body.clientwidth, h: d.body.clientHeight}; } // Deteksi apakah scrollbar menggulir ke bagian bawah fungsi halaman isscrolltopagebottom () {// document tinggi 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; } // Fungsi Templat Produk GetGoodStemplate (Goods) {return "<li>" + "<Div class = 'pic-wrap leftloat'>" + "<img src = '" + goods.pic + ">" + "</div>" + "<Div Class =' info-wrap leftfloat '>" + </div> " +" <v class =' info-wrap leftfloat '> " + </div>" + "<v class =' info-wrap leftfloat '>" + "info =' info = 'Info =' Info = 'Info =' Info = 'Info'>" Info '> </Div> "Info-n-nrap-n-nrap'>" </Div> "</span> </div>" + "<div class = 'info-address'> <span>" + goods.address + "</span> </div>" + "<div class = 'info-bottom'>" + "<div class = 'info-price leftfloat'> <span> ￥" + goods.price + "</span> </span"> CLIND = CLUS = "CLUS =" CLUS = "SPANT> </SPANT> </SPANT>"> <span> ￥ " goods.star + "Direkomendasikan </span> </div>" + "<div class = 'info-more leftfloat'> <span> Informasi lebih lanjut </span> </div>" + "</div>" + "</div>" + "</li>"; } // Langsung memuat 100 lembar data pada daftar selama inisialisasi $ .AJAX ("http: // localhost: 8800/loadData? Sessionid =" + ( + tanggal baru)). Done (function (hasil) {if (hasil) {var html = ""; hasil. $ ("#Daftar"). Append (html); // memuat fungsi data loadDatadynamic () {// Pertama tunjukkan bahwa itu memuat jika ($ ("#loadingli"). Length === 0) $ ("#Daftar"). Tambahkan ("<li id = 'loadingli' class = 'Loading'> memuat ... </li>"); else {$ ("#loadingli"). text ("Loading ..."). RemoveClass ("Space"); } var loadingli = document.getElementById ("loadingli"); loadingli.scrollintoview (); // memuat data, setelah data dimuat, Anda perlu menghapus prompt pemuatan var hasdata = false, msg = ""; $ .AJAX ("http: // localhost: 8800/loaddata? sessionid =" + ( + tanggal baru)). Done (function (hasil) {if (result.status) {if (hasil.data.lata> 0) {hasData = true; var html = ""; getGoodstemplate (barang); setTimeout () {$ (document.body) .scrolltop (document.body.scrolltop -40);}, 500); } // Jika scrollbar menggulir ke bagian bawah halaman, data baru perlu dimuat, dan prompt pemuatan ditampilkan WatchsCroll () {if (! IsscrolltopageBottom ()) {setTimeout (arguments.callee, 900); kembali; } loaddatadynamic (); } // Mulailah mendeteksi scrollbar watchscroll (); </cript> </body> </html>Data yang saya simulasikan melalui jQuery-Mockjax dalam demo. Kodenya adalah sebagai berikut:
/*** Antarmuka simulasi. */var i = 0, len = 200, alamat = ["sichuan", "beijing", "shanghai", "guangzhou", "shenzhen", "gansu", "yunnan", "zhejiang", "qinghai", "guizhou"; []; for(; i < size; i++){ arr.push({ name: "Apple" + (i % 10 + 1), pic: "assets/images/iphone" + (i % 10 + 1) + ".jpg", price: parseInt(Math.random() * 10000), star: parseInt(Math.random() * 1000), address: addresses[i % 10] }) } return arr;} $. mockjax ({url: 'http: // localhost: 8800/loadData*', responseTime: 1000, response: function (pengaturan) {this.responsetext = {status: true, data: getData ()}}});Seluruh demo penuh yang telah saya unggah ke GitHub:
https://github.com/heavis/pageloader
Demo online:
https://heavis.github.io/pageloader/index.html
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.