在做移動(dòng)端加載更多的時(shí)候，需要了解三個(gè)屬性

scrollTop

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

　　document.documentElement.scrollTop

clientHeight

　　可視區(qū)域高度

　　document.body.clientHeight

scrollHeight

　　整個(gè)body的高度

　　document.documentElement.scrollHeight

也就是當(dāng)

scrollTop+clientHeight >= scrollHeight 那么底部進(jìn)入可視區(qū)域，即可加載更多

?

我們封裝一個(gè)分頁方法

首頁先約定API接口參數(shù)

　　start 是開始記錄數(shù)據(jù)，默認(rèn)為0，?

　　count 是記錄條數(shù)，默認(rèn)20

返回參數(shù)

　　total

首先我們封裝一個(gè)分頁

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

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

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

我們添加了3個(gè)方法一個(gè)是獲得當(dāng)前start，一個(gè)是獲得count，最后一個(gè)初始化。

我們?cè)谕晟葡?#xff0c;無數(shù)據(jù)或者是否還有更多數(shù)據(jù)的情況

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 // 無更多數(shù)據(jù)if (this.data.length === 0) {this.empty = true // 沒有數(shù)據(jù) }}// 如果有數(shù)據(jù)，那么修改start和data數(shù)據(jù)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

這時(shí)候要考慮用戶可能多次加載數(shù)據(jù)，也就是說服務(wù)器還沒返回?cái)?shù)據(jù)的時(shí)候，用戶多次發(fā)送請(qǐng)求，那么我們需要鎖機(jī)制

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

移動(dòng)端分頁封主要考慮以下幾點(diǎn)

　　數(shù)據(jù)是否為空

　　數(shù)據(jù)是否還有更多數(shù)據(jù)

　　數(shù)據(jù)是否多次加載重復(fù)請(qǐng)求

　　

轉(zhuǎn)載于:https://www.cnblogs.com/sonwrain/p/10683826.html

總結(jié)

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

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