收藏
回答

如何进行二级列表的局部刷新?

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

【需求】相册显示由二级列表来组织:一级列表为日期,二级列表为照片缩略图(一个页面可以显示15张缩略图)。点击一级列表中的某个日期,展开二级列表显示该天拍摄的照片缩略图

假设某日期下已经有150个缩略图,用户下拉查看了所有150个缩略图后,上拉停留在第100个缩略图的位置。然后用户离开当前页面,拍摄新的照片,该照片缩略图以第0号元素插入该天缩略图列表(日期新的在前面)。回到相册页面的时候之前第100个缩略图的位置应当展示之前第99号缩略图,其余依次下移。

【问题】我的问题是,小程序如何定位到当前停留在一级列表和二级列表的某个(某几个)缩略图位置,从而仅仅对该位置前后的局部缩略图进行刷新?我当前用onReachBottom和onPullDownRefresh来进行上下触底的刷新,但是无法定位到页面当前停留位置。

谢谢!


最后一次编辑于  09-15
回答关注问题邀请回答
收藏

2 个回答

  • 天道酬勤
    天道酬勤
    09-15

    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)


    09-15
    赞同 1
    回复 3
    • 零时零刻
      零时零刻
      09-24
      你好!SelectorQuery()相关接口有bug吧!开发者工具中微信首次运行后第一次的res[0]为空,第二次及以后就不为空了。
      09-24
      回复
    • 天道酬勤
      天道酬勤
      09-25回复零时零刻
      不会吧
      09-25
      回复
    • 零时零刻
      零时零刻
      09-25
      有开发者也发现了这个问题
      09-25
      回复
  • 零时零刻
    零时零刻
    09-16

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

    09-16
    赞同
    回复
问题标签