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