之前已經寫過一篇關于上拉加載更多的文章，那個主要是根據滾動實現分頁向后臺發起請求實現。這次實現方式為后臺返回所有需要加載的數據，前端這邊做視覺上的分頁效果。實現原理也是根據滾動距離觸發加載更多的條件。

我這邊的需求是需要在模態框里實現一個列表的加載更多的功能。實現原理：根據彈框內的父元素的溢出高度也就是滾動高度超出十條數據的高度，立即觸發加載下一頁。

具體代碼實現如下：

getOffsetHeight(){this.$nextTick(() => { //使用nextTick為了保證dom元素都已經渲染完畢

let cardList =[];

let pagecount= 0;

let receivedcardList= this.receivedState[this.isStateActive].cardList;for(let i = 0; i<= receivedcardList.length ; i+=10){

cardList.push(receivedcardList.slice(i,i+10))

}this.receivedState[this.isStateActive].cardList =cardList[pagecount];this.$refs.receivedCardList.onscroll = ()=>{if(this.isLoading){if((this.$refs.receivedCardList.scrollTop?>=?(730?+?pagecount*730)) && this.isStateActive == 1){

if(pagecount >=cardList.length){this.isLoading = false;

}else{this.isLoading = true;

pagecount++;if(cardList[pagecount] && cardList[pagecount].length> 0){this.receivedState[this.isStateActive].cardList = this.receivedState[this.isStateActive].cardList.concat(cardList[pagecount]);

}

}

}

}

}

})

}

其中:??receivedcardList 接收到的是后臺返回的所有數據的一個數組，定義一個cardList 將receivedcardList分割成十條一組的數據組成的數組，然后對cardlist 進行操作。通過監聽ref獲取的dom元素的滾動高度 來做條件判斷。定義一個分頁變量，每次加載超過分頁乘以定義好的滾動距離 即可觸發條件。當分頁大小超過cardList長度值就將變量isLoading 設置為false,以此來保證數組不再繼續累加(相當于阻止繼續請求的一個操作)。

以上。

總結

以上是生活随笔為你收集整理的java h5 上拉加载更多_移动端H5页面上拉加载更多功能实现（二）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。