如何利用JS實現(xiàn)頁面數(shù)據(jù)無限加載_第1頁
如何利用JS實現(xiàn)頁面數(shù)據(jù)無限加載_第2頁
如何利用JS實現(xiàn)頁面數(shù)據(jù)無限加載_第3頁
如何利用JS實現(xiàn)頁面數(shù)據(jù)無限加載_第4頁
如何利用JS實現(xiàn)頁面數(shù)據(jù)無限加載_第5頁
已閱讀5頁，還剩9頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

網(wǎng)站建設(shè)定制專家如何利用JS實現(xiàn)頁面數(shù)據(jù)無限加載實現(xiàn)數(shù)據(jù)無限加載的過程大致如下：1.滾動條滾動到頁面底部.2.觸發(fā)ajax加載，把請求返回的數(shù)據(jù)加載到列表后面.如何判斷滾動條是否滾動到頁面底部？我們可以設(shè)置一個規(guī)則：當滾動條的滾動高度和整個文檔高度相差不到20像素，則認為滾動條滾動到頁面底部了：文檔高度-視口高度-滾動條滾動高度<20要通過代碼實現(xiàn)這樣的判斷，我們必須要了解上面的這些高度通過哪些代碼獲??？可以參考我之前寫的一篇“HTML元素坐標定位，這些知識點得掌握”.上面的判斷，封裝了一個方法：//檢測滾動條是否滾動到頁面底部functionisScrollToPageBottom(){//文檔高度vardocumentHeight=document.documentElement.offsetHeight；varviewPortHeight=getViewportSize().h；varscrollHeight=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0；returndocumentHeight-viewPortHeight-scrollHeight<20；}判斷有了，我們就可以開啟一個定時器，900毫秒監(jiān)測一次，如果isScrollToPageBottom()返回true則調(diào)用ajax請求數(shù)據(jù)，如果返回false則通過900毫秒之后再監(jiān)測.下面是核心代碼實現(xiàn)：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>無限分頁</title><linkrel="stylesheet"href="assets/css/index.css"/></head><body><divclass="l"><ulid="list"class="list"></ul></div><scriptsrc="http:///jquery/3.1.0/jquery.min.js"></script><scriptsrc="js/jquery.mockjax.js"></script><scripttype="text/javascript"src="js/dataMock.js"></script><scripttype="text/javascript">//作為一個對象的w和h屬性返回視口的尺寸functiongetViewportSize(w){//使用指定的窗口，如果不帶參數(shù)則使用當前窗口w=w||window；//除了IE8及更早的版本以外，其他瀏覽器都能用if(w.innerWidth!=null)return{w：w.innerWidth，h：w.innerHeight}；//對標準模式下的IE（或任意瀏覽器）vard=w.document；if(patMode=="CSS1Compat")return{w：d.documentElement.clientWidth，h：d.documentElement.clientHeight}；//對怪異模式下的瀏覽器return{w：d.body.clientWidth，h：d.body.clientHeight}；}//檢測滾動條是否滾動到頁面底部functionisScrollToPageBottom(){//文檔高度vardocumentHeight=document.documentElement.offsetHeight；varviewPortHeight=getViewportSize().h；varscrollHeight=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0；returndocumentHeight-viewPortHeight-scrollHeight<20；}//商品模板functiongetGoodsTemplate(goods){return"<li>"+"<divclass='pic-wrapleftFloat'>"+"<imgsrc='"+goods.pic+"'>"+"</div>"+"<divclass='info-wrapleftFloat'>"+"<divclass='info-name'><span>"++"</span></div>"+"<divclass='info-address'><span>"+goods.address+"</span></div>"+"<divclass='info-bottom'>"+"<divclass='info-priceleftFloat'><span>￥"+goods.price+"</span></div>"+"<divclass='info-starleftFloat'><span>"+goods.star+"人推薦</span></div>"+"<divclass='info-moreleftFloat'><span>更多信息</span></div>"+"</div>"+"</div>"+"</li>"；}//初始化的時候默給list加載100條數(shù)據(jù)$.ajax("http：//localhost：8800/loadData？sessionId="+(+newDate)).done(function(result){if(result.status){varhtml=""；result.data.forEach(function(goods){html+=getGoodsTemplate(goods)；})；$("#list").append(html)；}})；//加載數(shù)據(jù)functionloadDataDynamic(){//先顯示正在加載中if($("#loadingLi").length===0)$("#list").append("<liid='loadingLi'class='loading'>正在加載...</li>")；else{$("#loadingLi").text("正在加載...").removeClass("space")；}varloadingLi=document.getElementById("loadingLi")；loadingLi.scrollIntoView()；//加載數(shù)據(jù)，數(shù)據(jù)加載完成后需要移除加載提示varhasData=false，msg=""；$.ajax("http：//localhost：8800/loadData？sessionId="+(+newDate)).done(function(result){if(result.status){if(result.data.length>0){hasData=true；varhtml=""；result.data.forEach(function(goods){html+=getGoodsTemplate(goods)；})；$("#list").append(html)；}else{msg="數(shù)據(jù)已加載到底了"}}$("#list").append(loadingLi)；}).fail(function(){msg="數(shù)據(jù)加載失敗!"；}).always(function(){!hasData&&setTimeout(function(){$(document.body).scrollTop(document.body.scrollTop-40)；}，500)；msg&&$("#loadingLi").text(msg)；//重新監(jiān)聽滾動setTimeout(watchScroll，900)；})；}//如果滾動條滾動到頁面底部，需要加載新的數(shù)據(jù)，并且顯示加載提示functionwatchScroll(){if(!isScrollToPageBottom()){setTimeout(arguments.callee，900)；return；}loadDataDynamic()；}//開始檢測滾動條watchScroll()；</script></body></html>demo中ajax請求我是通過jquery-mockjax模擬的數(shù)據(jù).代碼如下：/***模擬接口.*/vari=0，len=200，addresses=["四川"，"北京"，"上海"，"廣州"，"深圳"，"甘肅"，"云南"，"浙江"，"青海"，"貴州"]；functiongetData(){varsize=Math.min(i+50，len)，arr=[]；for(；i<size；i++){arr.push({name："蘋果"+(i%10+1)，pic："assets/images/iphone"+(i%10+1)+".jpg"，price：parseInt(Math.random()*10000)，star：parseInt(Math.random()*1000)

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論