如何利用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ī)則：當(dāng)滾動條的滾動高度和整個文檔高度相差不到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ù)則使用當(dāng)前窗口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)容負責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論