Al navegar por páginas web en teléfonos móviles, a menudo se usa una función. Cuando navegamos por JD o Taobao, la página se desliza hacia abajo y vemos que los datos se cargan automáticamente en la lista. No sabía cómo se implementaron estas funciones antes, así que simulé e implementé tales funciones en mi navegador PC. Echemos un vistazo al efecto de navegación:
Cuando la barra de desplazamiento se desplaza a la parte inferior de la página, se muestra el mensaje "Cargando ...".
Cuando la página tiene todos los datos cargados, desplazándose a la parte inferior de la página solicitará "los datos se han cargado hasta el final":
El proceso de implementación de la carga infinita de datos es aproximadamente como sigue:
1. Barras de desplazamiento hasta la parte inferior de la página.
2. Activar la carga de Ajax y cargar los datos devueltos por la solicitud a la lista.
¿Cómo saber si la barra de desplazamiento se desplaza a la parte inferior de la página? Podemos establecer una regla: cuando la altura de desplazamiento de la barra de desplazamiento es inferior a 20 píxeles diferente de la altura de todo el documento, se considera que la barra de desplazamiento se ha desplazado hasta la parte inferior de la página:
Altura del documento - Altura de la ventana gráfica - Altura de desplazamiento de la barra de desplazamiento <20
Para lograr tal juicio a través del código, ¿debemos entender por qué código se obtienen las alturas anteriores? Puede consultar un artículo que escribí antes: "El posicionamiento de coordenadas de elementos HTML, debe dominar estos puntos de conocimiento".
En el juicio anterior, encapsulé un método:
// Detección de si la barra de desplazamiento se desplaza a la parte inferior de la función de la página isscrolltoPageBottom () {// Document Hear var documentHeight = document.documentelement.offsetheight; var var scrollHeight = window.pageyOffset || document.documentelement.scrolltop || document.body.scrolltop || 0; return documentHeight - ViewPorthEight - ScrollHeight <20; }Una vez que tenemos el juicio, podemos encender un temporizador y monitorearlo una vez en 900 milisegundos. Si ISSCROLLTOPAGATTOM () devuelve verdadero, llame a AJAX para solicitar datos. Si se devuelve False, pasa 900 milisegundos antes de monitorear.
La siguiente es la implementación del código central:
< src = "// cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script><script src =" js/jQuery.mockjax.js "> </script> <script type =" text/javascript "src =" js/datamock.js "> </script> <script type Las propiedades W y H de un objeto, devuelvan el tamaño de la función Viewport getViewPortsize (w) {// Use la ventana especificada, si no hay parámetro, use la ventana actual w = w || ventana; // Excepto para las versiones IE8 y anteriores, otros navegadores pueden usar if (w.innerwidth! = Null) return {w: w.innerwidth, h: w.innerheight}; // para IE (o cualquier navegador) en modo estándar var d = w.document; if (document.compatmode == "css1compat") return {w: d.documentelement.clientwidth, h: d.documentelement.clientheight}; // Vuelve a los navegadores en modo extraño {w: d.body.clientwidth, h: d.body.clientheight}; } // Detección de si la barra de desplazamiento se desplaza a la parte inferior de la función de la página IssCrollTopageBottom () {// Document Hever var documentHeight = document.documentelement.offsetheight; var var scrollHeight = window.pageyOffset || document.documentelement.scrolltop || document.body.scrolltop || 0; return documentHeight - ViewPorthEight - ScrollHeight <20; } // función de plantilla de producto getGoodstemplate (bienes) {return "<li>" + "<div class = 'pic-wrap leftfloat'>" + "<img src = '" + goods.pic + "'>" + "</div>" + "<divs = 'info-wrap-wrap izquierdoat'>" + "Div class = 'Info-name'> <span>" "</span></div>" + "<div class='info-address'><span>" + goods.address +"</span></div>" + "<div class='info-bottom'>" + "<div class='info-price leftFloat'><span>￥" + goods.price + "</span></div>" + "<div class='info-star leftFloat'><span>" + Goods.star + "recomendado </span> </div>" + "<div class = 'info-More LeftFloat'> <span> Más información </span> </div>" + "</div>" + "</div>" + "</li>"; } // Cargue directamente 100 piezas de datos en la lista durante la inicialización $ .AJAX ("http: // localhost: 8800/loadData? SessionId =" + ( + new date)). Done (function (result) {if (result.status) {var html = ""; resultado.data.ForEach (function (function) {htmLL + = getGoOdSpLate (beass);}); $ ("#list"). append (html); // Carga de datos de datos LoadDatadynamic () {// Primero muestra que está cargando si ($ ("#loadingli"). Longitud === 0) $ ("#List"). Append ("<li id = 'loadingli' class = 'Loading'> Carga ... </li>"); else {$ ("#loadingli"). Text ("Carga ..."). RemoveClass ("Space"); } var loadingli = document.getElementById ("Loadingli"); loadingli.scrollintoview (); // Carga de datos, después de cargar los datos, debe eliminar el indicador de carga var HasData = false, msg = ""; $ .AJAX ("http: // localhost: 8800/loaddata? sessionId =" + ( + new Date)). Done (function (resultado) {if (result.status) {if (result.data.length> 0) {asData = true; var html = ""; data.data.foreach (function) }); $ (Document.Body) .ScrollTop (document.body.scrolltop -40); } // Si la barra de desplazamiento se desplaza a la parte inferior de la página, se deben cargar nuevos datos, y el indicador de carga se muestra en la función WatchScroll () {if (! IsScrollTopageTom ()) {setTimeOut (argumentos.callee, 900); devolver; } loadDatadynamic (); } // Comience a detectar Scrollbar WatchScroll (); </script> </body> </html>Los datos que simulé a través de jQuery-Mockjax en la demostración. El código es el siguiente:
/*** Interfaz de simulación. */var i = 0, len = 200, direcciones = ["sichuan", "beijing", "shanghai", "guangzhou", "shenzhen", "gansu", "yunnan", "zhejiang", "qinghai", "Guizhou"]; function getData () {var size = Math.min (i + 50, len). []; para (; i <size; i ++) {arr.push ({nombre: "Apple" + (i % 10 + 1), pic: "Assets/Images/iPhone" + (i % 10 + 1) + ".jpg", precio: parseint (math.random () * 10000), estrella: estrella: (matemática arr;} $. MockJax ({url: 'http: // localhost: 8800/loadData*', Responsetime: 1000, Respuesta: function (configuración) {this.ResponSetext = {status: true, data: getData ()}}});Toda la demostración completa que he subido a GitHub:
https://github.com/heavis/pageloader
Demostración en línea:
https://heavis.github.io/pageloader/index.html
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.