移動端h5列表頁上拉分頁加載更多


解釋一下這個加載的原理,首先第一個紅色箭頭是回調成功后獲取的數據,默認是回調第一頁的數據(讓后端給接口的時候要分頁),然后把第一頁的數據放到data.recordList里面。重點在第二個箭頭,我利用的是當 屏幕高度 + 網頁被卷去的高 >= 網頁正文全文高 的時候,再次調用getList(),就如第一個箭頭所見,第一次調用getList的時候page=1,成功回調后page++,所以當我第二次調用的時候就是第二頁的內容,把第二頁的內容加到第一頁上,這樣在視覺效果上就形成了一個上拉加載更多的一個樣子。然后當翻到最后一頁的時候,isEnd就會為true,放在頁面最下面的loading.gif就會被除去,再上拉的時候,getList()方法不會進入到ajax里面去獲取數據

 

解釋一下加載原理 代碼從上往下執行加載,定義當前頁數pageNo是第一頁,定義一個結束的變量isEnd,執行第一次加載時,請求接口傳pageNo=1,isEnd=false,

if(res.data.length<1) {
isEnd = true
return false;
}
不滿足上面的條件,跳過這塊代碼,繼續往后執行pageNo++,依次循環執行代碼,當滿足下面條件時
if(res.data.length<1) {
isEnd = true
return false;
}
結束執行


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM