评论

scroll-view组件中使用bindscrolltoupper上滑加载历史内容

scroll-view使用scroll-into-view滚动进入指定的视图

dom结构

<scroll-view scroll-y  bindscrolltoupper="upper" scroll-into-view="{{toView}}" >
  <view id="green" >1</view>
  <view id="red" >2</view>
  <view id="yellow">3</view>
  <view id="blue" >4</view>
</scroll-view>

可能出现的问题:

使用scroll-view中的bindscrolltoupper事件监听上拉事件,然后在scroll-view里面内容的上面追加内容,滚动条会直接滚动到对顶端,而不是停留在当前的视图窗口(类似微信消息界面上拉会加载以前的消息记录,加载完成后,界面不会自动滚动到最上面)

解决思路

该问题的核心在于需要加载历史数据后,滚动条停留在当前的视图内容,而不是滚动到顶部,关键在于要使用scroll-into-view属性,将滚动条滚动进入指定的视图,那么每个view都要有一个唯一的id

坑:新添加的view,使用新的id,已经渲染出来的view,它的id不要变更

伪代码
upper(){
   // 给每个新的view指定一个唯一的新id
   this.list = this.list.map(x => {
     x.id = XXX
   })
  // 把this.list set 进入页面中
  // 滚动进入指定视图
   this.toView = toView
}
最后一次编辑于  2019-09-27  
点赞 3
收藏
评论

1 个评论

  • 维塔斯的星星
    维塔斯的星星
    2019-12-16

    每次拉历史消息,都要setData一次才会视图更新,然后想要把视图固定在当前位置而不随内容更新自动滚动最顶部。用你这个方法依然不行,无解了吗?

    2019-12-16
    赞同
    回复 1
    • 2019-12-19
      如果滚动到最顶部,就是你把view的id变更了,这个方法最重要的一点就是对于已经渲染出来的view,它的id不能变新的view分配id后,继续追加
      2019-12-19
      回复
登录 后发表内容