「前端騷操作」從未如此Easy！小程序滾動分頁加載做到

2018-09-27 動漫 299 Views

尋夢新聞LINE@每日推播熱門推薦文章，趣聞不漏接❤️

加入LINE好友

「前端騷操作」從未如此Easy！小程序滾動分頁加載實現

title

滾動分頁

滾動分頁加載是非常常見的應用需求與技巧了，本次我們拿小程序的 scroll-view 舉例，說明滾動分頁的做到。

小程序《動漫二次元圖片分享保存工具》為案例，可自行查看效果。

scroll-view

這是小程序框架里面自帶的滾動視圖，可以設置滾動方向以及監聽相關滾動事件。

「前端騷操作」從未如此Easy！小程序滾動分頁加載實現

scroll-view

這是小程序官網的文檔，本文只用了框框里面的事件，上面的參數沒有設置，簡單就好……

框框那個 bindscrolltolower 是當觸底（縱向滾動）或觸右（橫向滾動）觸發的事件，如果是 Web 還得自己在 onscroll 類似設置：if (div.scrollTop + div.clientHeight === div.scrollHeight)

所以說小程序超級簡單了。

項目中

先看事由，關注我的人知道，這個項目一直在輕量更新，因為主要更新的是內容，而內容是數據庫的東西，前端增量是很少的（小程序屬於前端）。

但是隨著後面數據的增加，有些標籤帶來的圖片已經到了接近 50 張，在網路不好或者性能不好的機子上面，極易出現卡頓，尤其是網路差的時候，用戶體驗簡直爆炸（沒錯，自己的作品都受不了）。

那如果後面幾百上千張呢，那還不直接卡死得了。

所以，我們需要分頁，當然這個分頁和我們說得「分頁」有差，這個是滾動自動觸發加載後續內容的方案。

上代碼：

獲取數據管道不同，解決思路一致

const limit = 10 // 每次請求數目
let skipCount = 0 // 當前需要跳轉數目的倍率
let loading = false // 是否在請求中
let noMore = false // 還有沒有後續資源

一個一個解釋：

limit

簡單，就是每次請求多少個過來。不可變，所以用 const。

skipCount

一個計數器（凡是計數器都需要重置），很明顯 limit * skipCount 就是當前需要跳過的數目。

防止多次請求的關鍵，如果處理不好，容易竄數據。

noMore

用來防止已經請求全部了之後，繼續走響應函數邏輯，減輕服務器壓力。

繼續代碼：

// 清空控制參數
clearParam() {
 loading = false
 skipCount = 0
 noMore = false
 this.setData({
 images: []
 }) // 先清空
}

如上文所述，你得有個清空重置的管道（函數），這里 images: [] 是清空圖片的，嘛，你切換標籤總要清空之前資源，不然網路返回之前一直顯示之前的內容不舒服吧。

再來：

// 觸底事件
scrollBottom() {
 if (noMore) return
 skipCount++
 this.getImages(this.data.title)
}

觸底了，那麼是該考慮事件邏輯了。

確定還有沒有後續內容，沒有了，就直接返回，不做處理；
正常流程，首先將倍率 +1，沒什麼問題吧，比如已經收到 10 張，然後再請求 10 張，是不是要跳過之前的 10 張？
繼續圖片，這里就是獲取圖片。

別急，核心在這里：

loading = true // 請求前標記請求中
new AV.Query(className)
 .descending('updatedAt')
 .limit(limit) // 請求數量
 .skip(skipCount * limit) // 跳過的數量
 .find()
 .then(res => {
 wx.hideLoading()
 loading = false // 請求完畢後取消標記
 if(res.length < limit) noMore = true // 這里哦，請求到的結果少於預求數量，說明沒有存量了
 this.setData({
 images: this.data.images.concat(Array.from(res, item => item.get('url'))), // 注意，這是跟進數據，所以是拼接數組，千萬不要用替換數組……
 selectedClass: className
 })
 })
 .catch(console.error)

核心行打上了註釋，到這里是不是比較清晰了？

不要糾結那個 AV 是不是……那個 AV 是什麼，總之就是你獲取數據的接口了。

注意點：