前段时间实现一个小程序滚动加载更多消息的功能(利用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获取到高度,然后手动设置一下,这样所有的问题就解决了
小程序滚动加载与位置保持
本文探讨了在小程序中实现滚动加载更多消息功能时遇到的挑战及解决方案,特别是在处理列表项点击、数据状态改变和返回时位置保持的问题。通过递归请求数据和利用scroll-view组件的scroll-top属性,确保了数据加载正确且返回时能够停留在离开的位置。
3420

被折叠的 条评论
为什么被折叠?



