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

坑一

$(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");} });

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

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

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

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

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

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

坑二

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

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

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

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

總結

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

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