在做移動端加載更多的時候，需要了解三個屬性

scrollTop

　　當前元素距離頂部的距離，換句話說就是元素滾出視窗到頂部的距離

　　document.documentElement.scrollTop

clientHeight

　　可視區域高度

　　document.body.clientHeight

scrollHeight

　　整個body的高度

　　document.documentElement.scrollHeight

也就是當

scrollTop+clientHeight >= scrollHeight 那么底部進入可視區域，即可加載更多

?

我們封裝一個分頁方法

首頁先約定API接口參數

　　start 是開始記錄數據，默認為0，?

　　count 是記錄條數，默認20

返回參數

　　total

首先我們封裝一個分頁

class PagingModel {constructor(start = 0, count = 20) {this.start = start this.count = countthis.data = []} }export default PagingModel

加載更多，毫無疑問需要一個setMoreData方法

class PagingModel {constructor(start = 0, count = 20) {this.start = start this.count = countthis.data = []}setMoreData(newData) {if (!newData) return// 如果有數據，那么修改start和data數據this.start = this.start + this.countthis.data.concat(newData)}getStart(){return this.start}getCount() {return this.count}init() {this.start = 0this.data = []} }

我們添加了3個方法一個是獲得當前start，一個是獲得count，最后一個初始化。

我們在完善下，無數據或者是否還有更多數據的情況

class PagingModel {constructor(start = 0, count = 20) {this.start = start this.count = countthis.data = []this.empty = falsethis.ending = false}setMoreData(newData) {if (newData.length === 0) {this.ending = true // 無更多數據if (this.data.length === 0) {this.empty = true // 沒有數據 }}// 如果有數據，那么修改start和data數據this.start = this.start + this.countthis.data.concat(newData)}getEnding() {return this.ending}getEmpty() {return this.empty}getStart(){return this.start}getCount() {return this.count}init() {this.start = 0this.data = []} }export default PagingModel

這時候要考慮用戶可能多次加載數據，也就是說服務器還沒返回數據的時候，用戶多次發送請求，那么我們需要鎖機制

locked() {this.lock = true}unLocked() {this.lock = false}getLock() {return this.lock}

移動端分頁封主要考慮以下幾點

　　數據是否為空

　　數據是否還有更多數據

　　數據是否多次加載重復請求

　　

轉載于:https://www.cnblogs.com/sonwrain/p/10683826.html

總結

以上是生活随笔為你收集整理的移动端滚动加载的全部內容，希望文章能夠幫你解決所遇到的問題。

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