前兩天剛做的一個(gè)項(xiàng)目,需要用上拉加載的方式去請(qǐng)求數(shù)據(jù)。我原以為這會(huì)是很簡(jiǎn)單的，肯定分分鐘寫完（不過確實(shí)也挺簡(jiǎn)單的），只不過還是坑了我一些的。

坑一

$(window).scroll(function(){var scrollTop = $(this).scrollTop();var scrollHeight = $(document).height();var windowHeight = $(this).height();if(scrollTop + windowHeight == scrollHeight){alert("you are in the bottom");} });

看完上面的代碼是不是覺得完全沒有毛病，嗯吶~，當(dāng)初我也是這樣覺得的，很對(duì)呀。而且我在安卓手機(jī)和chrome模擬器上完全沒有問題。scrollTop獲取的是滾動(dòng)條滾動(dòng)的距離，scrollHeight獲取到的是整個(gè)文檔的高度，windowHeight是獲取當(dāng)前也就是你瀏覽器所能看到的頁面的那部分的高度，你已經(jīng)滾過的高度+你目前看到的剩下的可視高度等于你整個(gè)文檔高度的時(shí)候，確實(shí)表示了滾動(dòng)條就在文檔的最下面了。嗯，灰常好。然后你就灰常開心的去請(qǐng)求數(shù)據(jù)去了，也就是這樣：

是不是你現(xiàn)在也覺得木有毛病。我當(dāng)時(shí)測(cè)的時(shí)候也很開心。但是當(dāng)我去借了個(gè)蘋果的測(cè)試機(jī)來測(cè)的時(shí)候尼瑪問題來了。也就是我要講到的第一個(gè)坑。這段js對(duì)蘋果木有反應(yīng)。我就想著是咋回事嘛~，搞了半天才發(fā)現(xiàn)，原來自己傻了

if(scrollTop + windowHeight == scrollHeight){alert("you are in the bottom");}

其實(shí)坑就在這句話中，因?yàn)槭菍懙牡扔?#xff0c;所以只有一個(gè)點(diǎn)能判斷到達(dá)底部了，如果你不斷的觸動(dòng)屏幕，很有可能的你滾動(dòng)條就已經(jīng)達(dá)不到這個(gè)點(diǎn)了，而且加上蘋果手機(jī)到達(dá)底部的時(shí)候，你再滑動(dòng)的時(shí)候頁面會(huì)被拖出一個(gè)區(qū)域，所以這個(gè)點(diǎn)對(duì)于蘋果手機(jī)來說有問題。所以不能改成一個(gè)點(diǎn)。而且還有一個(gè)重要的原因就是，你的數(shù)據(jù)是請(qǐng)求得來的，你還需要拿數(shù)據(jù)去渲染頁面，為了用戶不等待，你需要預(yù)留一段時(shí)間來請(qǐng)求，而不是等到已經(jīng)最底部了再去請(qǐng)求。所以我立馬高興的改成了這樣：

if(scrollTop + windowHeight > scrollHeight -100){alert("you are in the bottom");}

這樣就是代表你在距離底部100px的時(shí)候都會(huì)給你觸發(fā)到達(dá)底部了。這樣果然蘋果沒問題了。但是我立馬發(fā)現(xiàn)了另外一個(gè)問題，也就是坑二。

坑二

數(shù)據(jù)重復(fù)了，啥意思呢？就是說你的滾動(dòng)條如果一直在距離底部100px的范圍內(nèi)得到話，它就會(huì)給你去執(zhí)行你的render()方法，然后去渲染頁面。你想如果你一直在100px的范圍的話，那他就會(huì)給你不斷的去發(fā)請(qǐng)求，上一個(gè)請(qǐng)求還沒執(zhí)行完，你又去了，請(qǐng)求的數(shù)據(jù)肯定會(huì)被重復(fù)。所以解決的辦法呢就是你設(shè)置一個(gè)標(biāo)志，如果上一次請(qǐng)求成功了之后，頁面渲染完成了之后，你再去請(qǐng)求，這樣就好了。代碼如下：

相比于剛剛的代碼，我加上了一個(gè)isSucc的變量來判斷，第一次請(qǐng)求這個(gè)變量是true，你可以去請(qǐng)求，一進(jìn)入后立馬把這個(gè)變量設(shè)置為false，代表我這次的請(qǐng)求還沒完全走完，你下一波等等，等到頁面完全渲染好了，請(qǐng)求已經(jīng)done了后你再把這個(gè)變量設(shè)置為true，然后下一波就可以去請(qǐng)求了。

你以為寫到現(xiàn)在完了，其實(shí)還有一個(gè)問題，就是當(dāng)數(shù)據(jù)庫中已經(jīng)沒有數(shù)據(jù)了，你就不能再狂發(fā)請(qǐng)求了，所以你還需要干一件事，就是再設(shè)置一個(gè)標(biāo)志來判斷數(shù)據(jù)庫中是否還有數(shù)據(jù)，有，就去請(qǐng)求，沒有就不要再去請(qǐng)求了。
所以最終的代碼應(yīng)該是這樣：

好啦~到現(xiàn)在為止一個(gè)上拉加載才寫好了，啦啦啦啦啦~寫的不對(duì)的地方望大神指教好改正！

總結(jié)

以上是生活随笔為你收集整理的上拉加载你这个坑货~的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。