uniapp 中 ScrollView 组件上拉分页怎么不滚动到最顶部
实现类似微信聊天页面,上拉加载更多历史聊天记录,每次上拉到顶部,界面自动会滚动到最顶部,我希望ScrollView不要滚动到最顶部,每次就停留在当前位置
1,绑定scroll-view中scroll-into-view属性
<scroll-view class="scroll-view" :scroll-y="true" :scroll-with-animation="false" :scroll-into-view="scrollViewIntoView" @scrolltoupper="loadHistory"></scroll-view>
2,将scroll-view中包裹元素设置flex样式
<scroll-view class="scroll-view" :scroll-y="true" :scroll-with-animation="false" :scroll-into-view="scrollViewIntoView" @scrolltoupper="loadHistory"> <view id="scroll-view-content" > <view class="item" v-for="item in list">{{item.name}}</view> </view> </scroll-view>
css代码:
#scroll-view-content { display: flex; flex-direction: column-reverse; }
3,绑定数据list,获得的数据为data,以下为实现代码
loadHistory: function () { if (data.length) { let start = this.list.length for (let i = start; i < start + data.length; i++) { const item = data[i - start] // 拿到data遍历的item this.list.push(item) } this.scrollViewIntoView = "view" + this.msgList[start - 1].id // 设置当前滚动到的元素(加载前最后一个元素) }