前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >uniapp 中 ScrollView 组件上拉分页不滚动到最顶部

uniapp 中 ScrollView 组件上拉分页不滚动到最顶部

原创
作者头像
高久峰
发布于 2023-12-16 06:16:07
发布于 2023-12-16 06:16:07
1.3K00
代码可运行
举报
运行总次数:0
代码可运行

介绍: 在UniApp中,如果想要实现类似微信聊天页面的上拉加载更多历史聊天记录功能,每次上拉到顶部时,界面不会自动滚动到最顶部,而是停留在当前位置。本指南将展示如何使用ScrollView组件实现这一功能。

步骤:

  1. 在scroll-view组件中绑定scroll-into-view属性,并设置为一个变量scrollViewIntoView。
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<scroll-view class="scroll-view" :scroll-y="true" :scroll-with-animation="false" :scroll-into-view="scrollViewIntoView" @scrolltoupper="loadHistory"></scroll-view>
  1. 设置scroll-view内部元素的样式为flex,并使用flex-direction: column-reverse属性使元素按照倒序排列。
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
#scroll-view-content {
    display: flex;
    flex-direction: column-reverse;
}
  1. 在数据绑定中,根据上拉加载的数据,将其添加到list数组中,并将变量scrollViewIntoView设置为加载前最后一个元素的id。
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档