휴대 전화에서 웹 페이지를 탐색 할 때는 종종 기능이 사용됩니다. JD 또는 Taobao를 탐색하면 페이지가 바닥으로 미끄러 져 데이터가 자동으로 목록에로드되어 있음을 알 수 있습니다. 이러한 기능이 이전에 어떻게 구현되었는지 몰랐으므로 PC 브라우저에서 이러한 기능을 시뮬레이션하고 구현했습니다. 브라우징 효과를 살펴 보겠습니다.
스크롤 바가 페이지 하단으로 스크롤하면 프롬프트 "로드 ..."가 표시됩니다.
페이지에 모든 데이터가로드되면 페이지 하단으로 스크롤하면 "데이터가 끝까지로드되었습니다".
무한한 데이터 로딩을 구현하는 프로세스는 대략 다음과 같습니다.
1. 페이지 하단에 막대를 스크롤합니다.
2. Ajax로드를 트리거하고 목록에 요청하여 리턴 된 데이터를로드합니다.
스크롤 바가 페이지 하단에 스크롤되는지 알 수있는 방법은 무엇입니까? 규칙을 설정할 수 있습니다. 스크롤 막대의 스크롤 높이가 전체 문서의 높이와 다른 20 픽셀 미만인 경우 스크롤 막대가 페이지 하단으로 스크롤 된 것으로 간주됩니다.
문서 높이 - 뷰포트 높이 -Scroll Bar Scroll Height <20
코드를 통해 그러한 판단을 달성하려면 위의 높이를 통해 어떤 코드를 얻는 지 이해해야합니까? 이전에 쓴 기사를 참조 할 수 있습니다. "HTML 요소 좌표 포지셔닝, 이러한 지식 포인트를 마스터해야합니다."
위의 판단에서 나는 방법을 캡슐화했다.
// 스크롤 바가 페이지 하단으로 스크롤되는지 여부를 감지합니다. isscrollTopageBottom () {// 문서 높이 var documentheight = document.documentElement.offSetheight; var viewportheight = getViewPortSize (). h; var scrollheight = window.pageyoffset || document.documentElement.scrolltop || document.body.scrolltop || 0; return docum }일단 판단이 나면 타이머를 켜고 900 밀리 초 안에 한 번 모니터링 할 수 있습니다. isscrolltopagebottom ()가 true를 반환하면 ajax에 전화하여 데이터를 요청하십시오. False가 반환되면 모니터링하기 전에 900 밀리 초 전달됩니다.
다음은 핵심 코드 구현입니다.
<! docType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> Infinite Pagination </title> <link rel = "stylesheet"href = "assets/css/index.css"/> </head> <body <liv> <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/javascript "src ="js/datamock.js "> </script> <script type = "text/javaScript"> // 객체의 w 및 h 속성으로 뷰포트의 크기 함수를 반환합니다. 창문; // IE8 및 이전 버전을 제외하고 다른 브라우저는 if (w.innerWidth! = null) return {w : w.innerWidth, h : w.innerHeight}; // 표준 모드의 IE (또는 모든 브라우저)의 경우 var d = w.document; if (docum // 이상한 모드에서 브라우저로 돌아갑니다 {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 docum } // 제품 템플릿 함수 getGoodStemplate (roods) {return "<li>" + "<div class = 'pic-wrap leftfloat'>" + "<img src = ' + goods.pic +"'> " +"</div> " +"<div class = 'info-wrap leftfloat'> " +"<div class = 'info-name'> "</span> </div>" + "<div class = 'info-address'> <span>" + goods.address + "</span> </div>" + "<div class = 'info-bottom'>" + "<div class = 'info-price leftfloat'> <span> < + goods.price +"</div> "<div class = <info"info "info" goods.star + "권장 </span> </div>" + "<div class = 'info-more leftfloat'> <span> 추가 정보 </span> </div>" + "</div>" + "</div>" + "</li>"; } // 초기화 중에 목록에 100 개의 데이터를 직접로드합니다. $ .ajax ( "http : // localhost : 8800/loaddata? sessionid =" + ( + new date)). done (function (result) {if (result.status) {var html = ""; result.data.foreach (good) {getgstemplate (goods); $ ( "#list"). Append (html); // 데이터 함수로드로드 DATADYNAMIC () {// 먼저 ($ ( "#loadingLi"). length === 0) $ ( "#list"). Append ( "<li id = 'loadingLi'class = 'loading'> loading ... </li>"); else {$ ( "#loadingLi"). 텍스트 ( "로드 ..."). RemoveClass ( "Space"); } var loadingLi = document.getElementById ( "loadingLi"); loadingli.scrollintoview (); // 데이터로드, 데이터가로드 된 후로드 프롬프트를 제거해야합니다 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 () }); "#list". $ (document.body) .scrolltop (document.body.scrolltop -40), 500; } // 스크롤 바가 페이지 하단으로 스크롤되면 새 데이터를로드해야하고로드 프롬프트가 표시됩니다. 기능 WatchScroll () {if (! isscrollTopageBottom ()) {settimeout (arguments.callee, 900); 반품; } loadDatAdynamic (); } // Scrollbar WatchScroll (); </script> </body> </html>을 감지하기 시작합니다Demo에서 jQuery-mockjax를 통해 시뮬레이션 한 데이터. 코드는 다음과 같습니다.
/*** 시뮬레이션 인터페이스. */var i = 0, len = 200, 주소 = [ "sichuan", "Beijing", "Shanghai", "Guangzhou", "Shenzhen", "Gansu", "Yunnan", "Zhejiang", "Qinghai", "Guizhou"] {var getData () { + 50, Len (i + 50, Len); []; for (; i <size; i ++) {arr.push ({name : "apple" + (i % 10 + 1), pic : "자산/이미지/iPhone" + (i % 10 + 1) + ".jpg", parseint (math.random () * 100000), star : parseint (math.random (1000)) arr;} $. mockjax ({url : 'http : // localhost : 8800/loaddata*', responseTime : 1000, 응답 : functions (settings) {this.responsetext = {status : true : getData ()}}});내가 Github에 업로드 한 전체 데모 전체 :
https://github.com/heavis/pageloader
온라인 데모 :
https://heavis.github.io/pageloader/index.html
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.