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

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

步骤：

1. 在scroll-view组件中绑定scroll-into-view属性，并设置为一个变量scrollViewIntoView。

代码语言：javascript复制

<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复制

<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复制

#scroll-view-content {
    display: flex;
    flex-direction: column-reverse;
}

1. 在数据绑定中，根据上拉加载的数据，将其添加到list数组中，并将变量scrollViewIntoView设置为加载前最后一个元素的id。

代码语言：javascript复制

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组件进行上拉加载更多历史记录时，界面不会滚动到最顶部，而是停留在当前位置。

javascript

0 人点赞