Ao navegar nas páginas da Web em telefones celulares, uma função é frequentemente usada. Quando navegamos JD ou Taobao, a página desliza para a parte inferior e vemos que os dados são carregados automaticamente na lista. Eu não sabia como essas funções foram implementadas antes, então simulei e implementei essas funções no navegador do PC. Vamos dar uma olhada no efeito de navegação:
Quando a barra de rolagem rola na parte inferior da página, o prompt "Carregando ..." é exibido.
Quando a página tiver todos os dados carregados, rolar para a parte inferior da página solicitará "os dados foram carregados até o final":
O processo de implementação do carregamento de dados infinitos é aproximadamente o seguinte:
1. Barras de rolagem na parte inferior da página.
2. Trigger Ajax Carregando e carregue os dados retornados pela solicitação para a lista.
Como saber se a barra de rolagem rola na parte inferior da página? Podemos definir uma regra: quando a altura de rolagem da barra de rolagem é inferior a 20 pixels diferentes da altura de todo o documento, considera -se que a barra de rolagem rolou até o fundo da página:
Altura do documento - Altura da viewport - Altura da barra de rolagem <20
Para alcançar esse julgamento através do código, devemos entender qual código as alturas acima são obtidas? Você pode se referir a um artigo que escrevi antes: "O posicionamento de coordenadas do elemento HTML, você deve dominar esses pontos de conhecimento".
No julgamento acima, encapsulei um método:
// Detecção se o scrollbar rola na parte inferior da função da página ISSCROLTOPAGEBOTTOM () {// Document Hight Var DocumentHeight = document.documentElement.offSethEight; var ViewPorthEight = getViewPortSize (). H; var scrolHeight = window.pageyoffset || document.documentElement.scrolltop || document.body.scrolltop || 0; Retornar DocumentHeight - ViewPorthEight - ScrolHeight <20; }Depois de julgarmos, podemos ativar um cronômetro e monitorá -lo uma vez em 900 milissegundos. Se IssCrolltopageBottom () retornar true, ligue para o AJAX para solicitar dados. Se False for devolvido, ele passa 900 milissegundos antes de monitorar.
A seguir, a implementação do código principal:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> paginação infinita </title> <link rel = "stylesheet" href = "ativos/css/index.css"/</head> <body> <ld> 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 = "Texto/javascript"> // Como propriedades w e h de um objeto, retorne a função de tamanho da viewport getViewportSize (w) {// use a janela especificada, se não houver parâmetro, use a janela atual w = w || janela; // Exceto no IE8 e versões anteriores, outros navegadores podem usar se (w.innerwidth! = Null) retornar {w: w.innerwidth, h: w.innerHeight}; // para ie (ou qualquer navegador) no modo padrão var d = w.document; if (document.compatmode == "css1compat") return {w: d.documentElement.clientWidth, h: d.documentElement.clientHeight}; // retorna aos navegadores no modo estranho {w: d.body.clientwidth, h: d.body.clientHeight}; } // Detecção se o scrollbar rola na parte inferior da função da página ISSCrollToPageBottom () {// Document Hight Var DocumentHeight = document.documentElement.offSethEight; var ViewPorthEight = getViewPortSize (). H; var scrolHeight = window.pageyoffset || document.documentElement.scrolltop || document.body.scrolltop || 0; Retornar DocumentHeight - ViewPorthEight - ScrolHeight <20; } // Função do modelo do produto getGoodSTemplate (bens) {return "<li>" + "<div class = 'pic-wrap leftfloat'>" + "<img src = '" + goods.pic + "'>" + "</div "</span> </div>" + "<div class = 'info-address'> <pan>" + goods.address + "</span> </div>" + "<div class = 'info-Bottom'>" + "<div class = 'info-price leftfloat'> <span>" + Goods.Price + "</span> </span> </span> </span> </span> </span> <//price + goods.star + "recomendado </span> </div>" + "<div class = 'info-more leftfloat'> <pan> mais informações </span> </div>" + "</div>" + "</div>" + "</li>"; } // Carrega diretamente 100 dados de dados na lista durante a inicialização $ .ajax ("http: // localhost: 8800/loaddata? SessionId =" + ( + new Data). Done (function (resultado) {if (result.status) {var html = ""; result.dataod) (result.status) {var html = ""; result.dataod) (BOTS) {html = ""; $ ("#LIST"). Appender (html); // Função de dados de carregamento loadDatadynamic () {// mostra primeiro que está carregando se ($ ("#loadingli"). Length ==== 0) $ ("#list"). Append ("<li id = 'carregingli' class = 'carregamento'> carregando ... </li>"); else {$ ("#loadingli"). text ("carregando ..."). removeclass ("espaço"); } var loadingli = document.getElementById ("loadingli"); carregingli.scrollIntoView (); // Os dados de carregamento, depois que os dados são carregados, você precisa remover o prompt de carregamento var hasdata = false, msg = ""; $ .ajax ("http: // localhost: 8800/loaddata? sessionId =" + ( + nova data)). feito (function (resultado) {if (resultado.status) {if (result.data.latra.Length> 0) {hasdata = true; }); $ (Document.Body) .Scrolltop (Document.Body.Scrolltop -40); } // Se o scrollbar rolar para a parte inferior da página, novos dados precisam ser carregados e o prompt de carregamento é exibido WatchScroll () {if (! IsscrolltopageBottom ()) {setTimeout (argumentos.callee, 900); retornar; } loadDatadynamic (); } // Comece a detectar scrollbar watchscroll (); </sCript> </body> </html>Os dados que simulamos através do jQuery-mockjax na demonstração. O código é o seguinte:
/*** Interface de simulação. */var i = 0, len = 200, endereços = ["Sichuan", "Pequim", "Shanghai", "Guangzhou", "Shenzhen", "Gansu", "yunnan", "zhejiang", "qinghai", "guizhou"]; []; para (; i <tamanho; i ++) {arr.push ({name: "Apple" + (i % 10 + 1), pic: "Ativos/imagens/iPhone" + (i % 10 + 1) + ".jpg", preço: »parseint (math.random () * 10000), Star: ParseInt (Math.Random () * 1000), 1000), REUNDEMION: arr;} $. Mockjax ({url: 'http: // localhost: 8800/loaddata*', ResponseTime: 1000, resposta: function (configurações) {this.ResponseText = {status: true: dados: getData ()}}});Toda a demonstração completa que enviei para o Github:
https://github.com/heavis/pageloader
Demoção online:
https://heavis.github.io/pageloader/index.html
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.