之前已經寫過一篇關於上拉載入更多的文章，那個主要是根據滾動實現分頁向後台發起請求實現。這次實現方式為後台返回所有需要載入的資料，前端這邊做視覺上的分頁效果。實現原理也是根據滾動距離觸發載入更多的條件。
具體**實現如下：
getoffsetheight()this.receivedstate[this.isstateactive].cardlist =cardlist[pagecount];
this.$refs.receivedcardlist.onscroll = ()=>
else}}
}}})}
其中: receivedcardlist 接收到的是後台返回的所有資料的乙個陣列，定義乙個cardlist 將receivedcardlist分割成十條一組的資料組成的陣列，然後對cardlist 進行操作。通過監聽ref獲取的dom元素的滾動高度 來做條件判斷。定義乙個分頁變數，每次載入超過分頁乘以定義好的滾動距離 即可觸發條件。當分頁大小超過cardlist長度值就將變數isloading 設定為false,以此來保證陣列不再繼續累加（相當於阻止繼續請求的乙個操作）。
以上。
H5頁面上拉載入更多功能實現
首先定義獲取頁面當前的滾動高度方法 滾動條在y軸上的滾動距離 getscrolltop 文件的總高度 getscrollheight 瀏覽器視口的高度 getwindowheight 其次對當前頁面的滾動高度進行計算 錨點定位 initheight else if scrolltop this.re...
h5 實現頁面上拉載入更多資料
html style部分 html部分 js部分 js部分主要就是監控上拉，調介面 上拉載入更多css style wait loading keyframes waitloading 100 loading loading txt ending style div class loading st...
移動端h5列表頁上拉分頁載入更多
解釋一下這個載入的原理，首先第乙個紅色箭頭是 成功後獲取的資料，預設是 第一頁的資料 讓後端給介面的時候要分頁 然後把第一頁的資料放到data.recordlist裡面。重點在第二個箭頭，我利用的是當螢幕高度 網頁被卷去的高 網頁正文全文高 的時候，再次呼叫getlist 就如第乙個箭頭所見，第一次...