前段时间实现一个小程序滚动加载更多消息的功能(利用scroll-view实现),其中有几个需求需要特殊处理,
- 点击列表项可以进入详情;
- 点击列表项数据状态改变;
- 详情返回列表项位置依旧在离开时的地方
如果点击时没有数据状态改变那么可以直接使用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获取到高度,然后手动设置一下,这样所有的问题就解决了
