如何进行二级列表的局部刷新?
发布于 5 年前 作者 lsong 2166 次浏览 来自 官方Issues

大家好!在做一个类似相册的功能,需要帮助。

【需求】相册显示由二级列表来组织:一级列表为日期,二级列表为照片缩略图(一个页面可以显示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)

好的,非常感谢!我研究研究^_^

回到顶部