Lors de la navigation sur les pages Web sur les téléphones mobiles, une fonction est souvent utilisée. Lorsque nous naviguons JD ou Taobao, la page glisse vers le bas et nous voyons que les données sont automatiquement chargées dans la liste. Je ne savais pas comment ces fonctions avaient été implémentées auparavant, j'ai donc simulé et implémenté de telles fonctions sur mon navigateur PC. Jetons un coup d'œil à l'effet de navigation:
Lorsque la barre de défilement défile vers le bas de la page, l'invite "Chargement ..." s'affiche.
Lorsque la page a toutes les données chargées, le défilement vers le bas de la page invitera "les données ont été chargées à la fin":
Le processus de mise en œuvre du chargement de données infini est à peu près le suivant:
1. Faites défiler les barres au bas de la page.
2. Déclenchez le chargement Ajax et chargez les données renvoyées par la demande à la liste.
Comment savoir si la barre de défilement défile vers le bas de la page? Nous pouvons définir une règle: lorsque la hauteur de défilement de la barre de défilement est inférieure à 20 pixels différente de la hauteur de l'ensemble du document, il est considéré que la barre de défilement a fait défiler le bas de la page:
Hauteur du document - hauteur de la fenêtre - barre de défilement hauteur de défilement <20
Pour obtenir un tel jugement via le code, nous devons comprendre quel code les hauteurs ci-dessus sont obtenues? Vous pouvez vous référer à un article que j'ai écrit auparavant: "Le positionnement des coordonnées des éléments HTML, vous devez maîtriser ces points de connaissance."
Dans le jugement ci-dessus, j'ai encapsulé une méthode:
// Détection si la barre de défilement fait défiler vers le bas de la fonction de la page IsscrollTopageBottom () {// Hight Hight 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; }Une fois que nous avons le jugement, nous pouvons allumer une minuterie et le surveiller une fois en 900 millisecondes. Si isscrollTopageBottom () renvoie true, appelez Ajax pour demander des données. Si FALSE est retourné, il passe 900 millisecondes avant la surveillance.
Ce qui suit est l'implémentation de code de base:
<! Doctype html> <html lang = "en"> <éread> <meta charset = "utf-8"> <title> pagination infinie </ title> <link rel = "Stylesheet" href = "actifs / css / index.css" /> </-head> <body> <v> <ul id = "list"> </ul> src = "// cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script><script src =" js / jQuery.mockjax.js "> </ script> <script type =" Text / javascrip Propriétés W et H d'un objet, renvoyez la taille de la fonction de la fenêtre GetViewportSize (W) {// Utilisez la fenêtre spécifiée, s'il n'y a pas de paramètre, utilisez la fenêtre actuelle w = w || fenêtre; // à l'exception des versions IE8 et antérieures, d'autres navigateurs peuvent utiliser if (w.innerwidth! = Null) return {w: w.innerwidth, h: w.innerheight}; // pour IE (ou tout navigateur) en mode standard var d = w.Document; if (document.compatMode == "CSS1Compat") return {w: docomentElement.ClientWidth, h: d.DocumentElement.ClientHeight}; // retourne aux navigateurs en mode bizarre {w: d.body.clientwidth, h: d.body.clientheight}; } // Détection si la barre de défilement défile en bas de la fonction de page isscrollTopageBottom () {// Hight Hight 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; } // Fonction du modèle de produit GetGoodstemPlate (biens) {return "<li>" + "<div class = 'pic-wrap LeftFloat'>" + "<img src = '" + gofs.pic + "'>" + "</v>" + "<div class = 'info-wrap LeftFloat'>" + "<div class = 'info-name'> <pank>" + goods.name + "</span> </ div>" + "<div class = 'info-address'> <span>" + GOODS.Address + "</span> </div>" + "<div class = 'info-bottom'>" + "<div class = 'info priceffloat'> <span> ￥" + goods.price + "</spande> </v>" + "<div class = 'infoftar gauche'> </vride>" + "<div class = 'infoftar gauche' '> </vride>" + "<div Class =' Infoftar Leftfor '> </pande> +" + " GOODS.STAR + "Recommandé </span> </ div>" + "<div class = 'info-more LeftFloat'> <span> Plus d'informations </span> </div>" + "</div>" + "</div>" + "</li>"; } // Chargez directement 100 données sur la liste pendant l'initialisation $ .ajax ("http: // localhost: 8800 / loadData? SessionID =" + (+ new Date)). Done (function (result) {if (result.status) {var html = ""; result.data.ForEach (function) {html + = getgOODSTEMPELLAGE (}); $ ("# list"). Ajouter (html);}}); // Chargement Fonction Data LoadDatAdynamic () {// Affichez d'abord qu'il charge if ($ ("# chargingli"). Length === 0) $ ("# list"). APPEND ("<li id = 'LoadingLi' class = 'Loading'> Loading ... </li>"); else {$ ("# chargingli"). text ("Loading ..."). RemoveClass ("Space"); } var chargeingli = document.getElementById ("LoadingLi"); LoadingLi.ScrolLintoView (); // Données de chargement, une fois les données chargées, vous devez supprimer l'invite de chargement var hasdata = false, msg = ""; $ .ajax ("http: // localhost: 8800 / loadData? sessionID =" + (+ new Date)). Done (function (result) {if (result.status) {if (result.data.length> 0) {HasData = true; var html = ""; result.data.ForEach (fonction (fonction) {html = ""; Result.Data.ForEach (fonction) {html = "" }); $ ("# list"). $ (Document.Body). } // Si la barre de défilement défile vers le bas de la page, les nouvelles données doivent être chargées et l'invite de chargement est affichée watchscroll () {if (! IsscrollTopageBottom ()) {setTimeout (arguments.callee, 900); retour; } LoadDatAdynamic (); } // Commencez à détecter des watchscroll de Scrollbar (); </cript> </ body> </html>Les données que j'ai simulées via jQuery-Mockjax en démo. Le code est le suivant:
/ ** * Interface de simulation. * / var i = 0, len = 200, adresses = ["sichuan", "beijing", "shanghai", "guangzhou", "shenzhen", "gansu", "yunnan", "zhejiang", "qinghai", "guizhou"]; function getdata () {var size = math.min (i + 50, len) () {var size = math.min (i + 50, len), artdata () {var size = math.min (i + 50, len), artdata () {var size. []; pour (; i <size; i ++) {arr.push ({nom: "Apple" + (i% 10 + 1), pic: "Assets / images / iPhone" + (i% 10 + 1) + ".jpg", prix: parseint (math.random () * 10000), star: parseInt (math.random () * 1000), adresse: adresse arr;} $. Mockjax ({url: 'http: // localhost: 8800 / loadData *', ResponseTime: 1000, réponse: fonction (paramètres) {this.ResponSEXT = {status: true: data: getData ()}}});Toute la démo complète que j'ai téléchargée sur GitHub:
https://github.com/heavis/pageloader
Démo en ligne:
https://heavis.github.io/pageloader/index.html
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.