介绍: 在UniApp中,如果想要实现类似微信聊天页面的上拉加载更多历史聊天记录功能,每次上拉到顶部时,界面不会自动滚动到最顶部,而是停留在当前位置。本指南将展示如何使用ScrollView组件实现这一功能。
步骤:
<scroll-view class="scroll-view" :scroll-y="true" :scroll-with-animation="false" :scroll-into-view="scrollViewIntoView" @scrolltoupper="loadHistory"></scroll-view>
<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;
}
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; // 设置当前滚动到的元素(加载前最后一个元素)
}
}
通过以上步骤,您可以实现在UniApp中使用ScrollView组件进行上拉加载更多历史记录时,界面不会滚动到最顶部,而是停留在当前位置。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
扫码关注腾讯云开发者
领取腾讯云代金券
Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号:粤B2-20090059 深公网安备号 44030502008569
腾讯云计算(北京)有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287
Copyright © 2013 - 2025 Tencent Cloud.
All Rights Reserved. 腾讯云 版权所有