前段時間實現(xiàn)一個小程序滾動加載更多消息的功能(利用scroll-view實現(xiàn)),其中有幾個需求需要特殊處理,
- 點擊列表項可以進入詳情;
- 點擊列表項數(shù)據(jù)狀態(tài)改變;
- 詳情返回列表項位置依舊在離開時的地方
如果點擊時沒有數(shù)據(jù)狀態(tài)改變那么可以直接使用onLoad方法可以輕松解決,因為要刷新數(shù)據(jù),所以只能講數(shù)據(jù)請求放在onShow方法中,這樣便造成頁面返回數(shù)據(jù)不能停留在離開時的位置
首先想到的是利用for循環(huán)將獲取到已經(jīng)加載的頁數(shù),從1遞增到離開時的頁數(shù)
for(var i=1,i<=pageNum;i++){
wx.request({
...//請求數(shù)據(jù)與處理
})
}
然而微信的請求是異步的,使用var循環(huán)后i始終為最后一頁.因為小程序支持ES6,直接將var換成let,可是結(jié)果和我們預(yù)想的不一樣,每次獲取到數(shù)據(jù)最少的最先返回,使用數(shù)組拼接concat發(fā)現(xiàn)順序總是不可預(yù)測(可能和數(shù)據(jù)查詢花費的時間有關(guān))
其實能用for循環(huán)遍歷的東西都可以使用遞歸的方法替代,只是遞歸的的方法效率會慢一點
function getItems(){
wx.request({
... //
success:(res)=>{
if(num < pageNum) {
getItems(++num);
}
}
})
}
getItems(1)
這樣雖然可以解決數(shù)據(jù)加載的問題,但是在IOS下還是沒法回到離開時的位置,這個時候利用scroll-view組件的scroll-top屬性通過bindscroll獲取到高度,然后手動設(shè)置一下,這樣所有的問題就解決了
