公告列表
公告列表
收藏
回答

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

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

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

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

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

谢谢！


回答关注问题邀请回答
收藏

2 个回答

  • tiandaodao
    tiandaodao
    2019-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）


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

    好的，非常感谢！我研究研究^_^

    2019-09-16
    有用
    回复
请 登录 后发表内容
相关问题
相关文档
问题标签
onreachbottom相册位置日期照片