前段時間實現一個小程式滾動載入更多訊息的功能(利用scroll-view實現),其中有幾個需求需要特殊處理,

1. 點選列表項可以進入詳情;
2. 點選列表項資料狀態改變;
3. 詳情返回列表項位置依舊在離開時的地方

如果點選時沒有資料狀態改變那麼可以直接使用onLoad方法可以輕鬆解決,因為要重新整理資料,所以只能講資料請求放在onShow方法中,這樣便造成頁面返回資料不能停留在離開時的位置
首先想到的是利用for迴圈將獲取到已經載入的頁數,從1遞增到離開時的頁數

for(var i=1,i<=pageNum;i++){
    wx.request({
        ...//請求資料與處理
    })
}
 

然而微信的請求是非同步的,使用var迴圈後i始終為最後一頁.因為小程式支援ES6,直接將var換成let,可是結果和我們預想的不一樣,每次獲取到資料最少的最先返回,使用陣列拼接concat發現順序總是不可預測(可能和資料查詢花費的時間有關)
其實能用for迴圈遍歷的東西都可以使用遞迴的方法替代,只是遞迴的的方法效率會慢一點

function getItems(){
    wx.request({
        ... //
        success:(res)=>{
            if(num < pageNum) {
                getItems(++num);
            }
        }
    })
}
getItems(1
 
)

這樣雖然可以解決資料載入的問題,但是在IOS下還是沒法回到離開時的位置,這個時候利用scroll-view元件的scroll-top屬性通過bindscroll獲取到高度,然後手動設定一下,這樣所有的問題就解決了