При просмотре веб -страниц на мобильных телефонах часто используется функция. Когда мы просматриваем JD или Taobao, страница скользит внизу, и мы видим, что данные автоматически загружаются в список. Я не знал, как эти функции были реализованы ранее, поэтому я смоделировал и реализовал такие функции в своем браузере для компьютера. Давайте посмотрим на эффект просмотра:
Когда прокрутка прокрутки прокручивается в нижней части страницы, отображается подсказка «Загрузка ...».
Когда на странице все данные загружены, прокрутка до нижней части страницы заставит «данные были загружены до конца»:
Процесс реализации бесконечной загрузки данных примерно следующим образом:
1. Прокрутите стержни до нижней части страницы.
2. Запустите Ajax загружать и загрузите данные, возвращаемые запросом в список.
Как узнать, прокручиваются ли прокрутка в нижней части страницы? Мы можем установить правило: когда высота прокрутки полоса прокрутки составляет менее 20 пикселей, отличных от высоты всего документа, считается, что стержень прокрутки прокручился до нижней части страницы:
Высота документа - Высота видового порта - Высота прокрутки шарнирной прокрутки <20
Чтобы достичь такого суждения с помощью кода, мы должны понять, какой код вышеупомянутые высоты достигаются? Вы можете ссылаться на статью, которую я написал ранее: «Позиционирование координат элементов HTML, вы должны овладеть этими знаниями».
В приведенном выше суждении я инкапсулировал метод:
// Обнаружение того, прокручивается ли прокрутка прокрутки в нижней части функции страницы 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 () возвращает true, вызовите Ajax для запроса данных. Если False возвращается, он проходит 900 миллисекунд перед мониторингом.
Ниже приводится реализация основного кода:
<! Doctype html> <html lang = "en"> <head> <meta charset = "UTF-8"> <Title> Infinite Pagination </title> <link rel = "Стилифт" href = "Assets/css/index.css"/> </head> <body> <div> <ul id = "> </u. 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 " type = "text/javascript"> // как свойства w и h объекта верните функцию размера Viewport getViewPortSize (w) {// Использовать указанное окно, если нет параметра, используйте текущее окно w = w || окно; // За исключением IE8 и более ранних версий, другие браузеры могут использовать if (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; } // Функция шаблона продукта getGoodstemplete (Goald) {return "<li>" + "<div class = 'wrap leftfloat'>" + "<img src = '" + goods.pic + "'>" + "</div>" + "<div class = 'info-wrap lewfloat'>" + "<div class = 'info-name'> <prop> n. "</span> </div>" + "<div class = 'info-address'> <pan>" + goods.address + "</span> </div>" + "<div class = 'info-bottom'>" + "<div class = 'info-pprice leftfloat'> <pan> ￥" + goods.price + "</span> </div>" <div> "staffloat '> starfloat'> star-span>" </div> "<div>" <div> "<dip> star-span goods.star + "Рекомендованное </span> </div>" + "<div class = 'info-more Leftfloat'> <pran> Дополнительная информация </span> </div>" + "</div>" + "</div>" + "</li>"; } // Непосредственная загрузка 100 деталей в список во время инициализации $ .ajax ("http: // localhost: 8800/loaddata? SessionId =" + ( + new Date)). Dod (function (result) {if (result.status) {var html = ""; result.data.foreach (goods.) {var html = "; $ ("#list"). Append (html); // Загрузка функции данных LOADDATADYNAMIC () {// Сначала показать, что он загружается if ($ ("#загрузка"). Длина === 0) $ ("#List"). Append ("<li id = 'загрузка' class = 'загрузка'> загрузка ... </li>"); else {$ ("#loadingli"). Text ("загрузка ..."). removeClass ("Space"); } var loadingli = document.getElementbyId ("загрузкали"); woodingli.scrollintoview (); // Загрузка данных. После загрузки данных вам необходимо удалить подсказку загрузки var hasdata = false, msg = ""; $ .ajax ("http: // localhost: 8800/loaddata? sessionId =" + ( + новая дата)). Dode (function (result) {if (result.status) {if (result.data.length> 0) {hasdata = true; var html = ""; Result.data.ForeAge (FUNCTION) {hOLDML + = = = = getGoodstemplate (Goals); settimeout (function () {$ (document.body). } // Если прокрутка прокрутки прокручивается в нижней части страницы, необходимо загрузить новые данные, а подсказка загрузки отображается функция WatchScroll () {if (! IsscrollTopageBottom ()) {setTimeout (arguments.callee, 900); возвращаться; } LoadDatAdyNamic (); } // начать обнаруживать Scrollbar WatchScroll (); </script> </body> </html>Данные, которые я смоделировал через jquery-mockjax в демонстрации. Код заключается в следующем:
/*** Имитационный интерфейс. */var i = 0, len = 200, address = ["sichuan", "pecjing", "shanghai", "guangzhou", "shenzhen", "gansu", "yunnan", "Zhejiang", "Qinghai", "guizhou"]; function getData () {vare.manIn (i + jemin (i +. []; for (; i <size; i ++) {arr.push ({name: «Apple» + (i % 10 + 1), PIC: «Assets/Images/iPhone» + (i % 10 + 1) + ".jpg", цена: parseint (math.random () * 10000), звезда: parseint (math.random () * 1000), адрес: адрес: адресат: i % 10], адреса. arr;} $. mockjax ({url: 'http: // localhost: 8800/loaddata*', responseTime: 1000, ответ: функция (настройки) {this.ResponseText = {status: true, data: getData ()}}});Вся полная демонстрация, которую я загрузил на GitHub:
https://github.com/heavis/pageloader
Онлайн демо:
https://heavis.github.io/pageLoader/index.html
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.