微信小程序?qū)崿F(xiàn)瀑布流分頁滾動加載
本文實例為大家分享了微信小程序?qū)崿F(xiàn)瀑布流分頁滾動加載的具體代碼,供大家參考,具體內(nèi)容如下
兩種分頁方式
普通的分頁效果會在頁面底部提供點擊下一頁和上一頁的按鈕,在點擊了按鈕之后才會觸發(fā)調(diào)取數(shù)據(jù)的接口,這種方式的用戶體驗一般
另一種分頁效果不需要用戶點擊按鈕,只要瀏覽到當前頁面的后幾條數(shù)據(jù)時,系統(tǒng)會自動發(fā)送請求獲取后一頁的數(shù)據(jù),并展示到頁面上,這樣就可以實現(xiàn)類似無限滾動的效果
以csdn為例,當滾動條到達這個地方時,會自動調(diào)用請求下一頁數(shù)據(jù)的接口,然后累加到加載完成的數(shù)據(jù)列表中
實現(xiàn)思路
滾動分頁的方式存在一個問題,當用戶滾動的非??鞎r,可能會導致第一次請求還未完成,第二次請求就開始了,為了避免這個問題,我們可以加入一個鎖標識,發(fā)送一次請求后加鎖,請求完成后釋放鎖,這樣就可以完美避免這種問題
得出實現(xiàn)思路
1、判斷是否還有可加載的數(shù)據(jù)
2、獲取鎖
3、發(fā)送請求,調(diào)用接口
4、釋放鎖
5、返回數(shù)據(jù)
代碼實現(xiàn)
首先我們需要一個paging對象
class Paging{ page //記錄當前頁碼 count //記錄一頁顯示的數(shù)量 req //接口請求對象(此處我已封裝,可按照自己需求定義屬性) url //請求路徑 moreData = true //是否存在下一頁數(shù)據(jù)(首次請求時默認存在下一頁數(shù)據(jù)) accumulator = [] //已加載的數(shù)據(jù)列表 locker = false //鎖標識 }
為paging對象定義一個構造器,默認從第一頁開始請求,每頁五條數(shù)據(jù)
constructor(req, page=0, count=5){ this.page = page this.count = count this.req = req this.url = req.url }
接下來編寫getMoreData方法
getMoreData(){ //1、判斷是否存在下一頁數(shù)據(jù) //2、獲取鎖,判斷鎖是否為釋放狀態(tài) //3、請求數(shù)據(jù) //4、釋放鎖 }
1、判斷是否存在下一頁數(shù)據(jù)
這里直接獲取moreData屬性進行判斷
if(!this.moreData){ return }
2、獲取鎖
此處新增一個方法,如果當前沒有鎖,代表可以繼續(xù)請求數(shù)據(jù),在請求數(shù)據(jù)前先把鎖標識設置為true,防止下次請求繼續(xù)發(fā)送
_getLocker(){ if(this.locker){ return false } this.locker = true return true }
3、請求數(shù)據(jù)
我們需要返回給頁面的數(shù)據(jù)結(jié)構如下:
{ empty, //是否為空 items, //當前頁數(shù)據(jù) moreData, //是否存在下一頁數(shù)據(jù) accumulator //已經(jīng)請求過的所有數(shù)據(jù) }
首先定義一個獲取請求結(jié)構的方法
_getCurrentReq(){ let url = this.url //設置請求參數(shù) const params = `page=${this.page}&count=${this.count}` //判斷拼接方式 if(url.includes('?')){ url += '&' + params }else{ url += '?' + params } this.req.url = url return this.req }
獲取數(shù)據(jù)的方法如下:
_actualGetData(){ const req = this._getCurrentReq() //獲取到具體的請求內(nèi)容 let paging = Http.request(req) //調(diào)用自定義工具中的請求方法,進行數(shù)據(jù)的獲取 //如果沒有獲取到結(jié)果直接返回null if(!paging){ return null } if(paging.total === 0){ return { empty: true, items: [], moreData: false, accumulator: [] } } //如果當前頁碼數(shù)小于總頁碼數(shù)表示還存在下一頁數(shù)據(jù),設置moreData為true,否則設置為false this.moreData = pageNum < totalPage-1 ? true : false //如果存在下頁數(shù)據(jù),將page+1,便于下次的獲取 if(this.moreData){ this.page += 1 } //因瀑布流顯示數(shù)據(jù)需要累加展示,所以數(shù)據(jù)列表也需要累加 this.accumulator = this.accumulator.concat(paging.items) return{ empty: false, items: paging.items, moreData: this.moreData, accumulator: this.accumulator } }
4、釋放鎖
釋放鎖直接將鎖標識的狀態(tài)改變即可
this.locker = false
getMoreData方法編寫完畢,然后就可以在對應界面的js文件中進行調(diào)用了
在第一次進入界面時,需要自動調(diào)用一次,然后在用戶每次觸底時再次調(diào)用
initBottomSpuList(){ //獲取到paging對象 const paging = new Paging({ url: url }) //將paging對象存入js的data中 this.data.spuPaging = paging //調(diào)用方法 const data = paging.getMoreData() if(!data){ return } //重新加載瀑布流 wx.lin.renderWaterFlow(data.items) },
微信小程序有自帶的觸底時自動觸發(fā)的函數(shù),將方法調(diào)用的代碼寫入這個函數(shù)即可
onReachBottom: function () { const data = this.data.spuPaging.getMoreData() if(!data){ return } //重新加載瀑布流 wx.lin.renderWaterFlow(data.items) }
至此,就可以實現(xiàn)瀑布流分頁滾動加載的效果了
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
IE8中動態(tài)創(chuàng)建script標簽onload無效的解決方法
這篇文章主要介紹了IE8中動態(tài)創(chuàng)建script標簽onload無效的解決方法,涉及針對javascript加載順序的調(diào)整,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-12通過javascript的匿名函數(shù)來分析幾段簡單有趣的代碼
想起自己很久以前學習javascript的經(jīng)歷,也曾經(jīng)碰到過幾個由匿名函數(shù)造成的困擾(其中一個就是由閉包引起的),下面就整理幾段簡單代碼討論一下,讓我們大家一起進步。2010-06-06