如何进行二级列表的局部刷新?
大家好!在做一个类似相册的功能,需要帮助。
【需求】相册显示由二级列表来组织:一级列表为日期,二级列表为照片缩略图(一个页面可以显示15张缩略图)。点击一级列表中的某个日期,展开二级列表显示该天拍摄的照片缩略图。
假设某日期下已经有150个缩略图,用户下拉查看了所有150个缩略图后,上拉停留在第100个缩略图的位置。然后用户离开当前页面,拍摄新的照片,该照片缩略图以第0号元素插入该天缩略图列表(日期新的在前面)。回到相册页面的时候之前第100个缩略图的位置应当展示之前第99号缩略图,其余依次下移。
【问题】我的问题是,小程序如何定位到当前停留在一级列表和二级列表的某个(某几个)缩略图位置,从而仅仅对该位置前后的局部缩略图进行刷新?我当前用onReachBottom和onPullDownRefresh来进行上下触底的刷新,但是无法定位到页面当前停留位置。
谢谢!
2 回复
1.要获取当前图的位置 利用api 获取 显示区域的滚动位置
const query = wx.createSelectorQuery()query.select('#the-id').boundingClientRect()query.selectViewport().scrollOffset()query.exec(function(res){
res[0].top // #the-id节点的上边界坐标
res[1].scrollTop // 显示区域的竖直滚动位置})
2.根据图片数组 更新指定图片
3.根据api 动态设置滚动条位置
wx.pageScrollTo({
scrollTop: 0,
duration: 300})
4.或者直接滚动时候 直接获取滚动条位置
onPageScroll(e)