简单的到顶下拉加载历史聊天记录的代码，希望对你有帮助

<template>  
    <view>  
        <scroll-view class="cnt-wrap fanzhuan" scroll-y :scroll-top="scrollTop" @scrolltolower="lastPage"  
            @scrolltoupper="_resetPage">  
            <view class="" style="position: fixed;top:40%;" @tap.stop="toBottom">置底</view>  
            <view id="to-bottom" class="text-center ft16 text-gray fanzhuan">底部</view>  
            <view class="item-wrap fanzhuan" v-for="item,index in list" :key="index">  
                <view v-if="index%10!=0" class="bubble left">  
                    <view v-if="index%15==0">  
                        <image class="image" src="../../static/no_msg.png" mode="widthFix"></image>  
                    </view>  
                    {{item}}  

                </view>  
                <view class="spring"></view>  
                <view v-if="index%10==0" class="bubble right">  
                    {{item}}  
                </view>  
            </view>  
            <view id="to-top" class="text-center ft16 text-gray fanzhuan">顶部</view>  

        </scroll-view>  

        <view style="position: fixed;bottom: 0;left: 0;">  
            <input-box></input-box>  
        </view>  
    </view>  
</template>  

<script>  
    import InputBox from "../../pagesChat/components/input-box.vue"  

    import {  
        debounce  
    } from '../common/util'  

    const List = len => [...new Array(len).keys()]  

    export default {  
        components: {  
            InputBox  
        },  
        data() {  
            return {  
                scrollTop: 0,  
                history: List(201),  
                list: [],  

                pageSize: 20,  
                lastPage: null  
            }  
        },  
        onShow() {  
            this._resetPage()  
        },  
        created() {  
            this.lastPage = debounce(this._lastPage, 200, true)  
        },  
        mounted() {  

        },  
        methods: {  
            _lastPage() {  
                console.log("到顶了")  
                if (this.history.length) {  
                    let arr = JSON.parse(JSON.stringify(this.history.splice(-this.pageSize) || []))  
                    arr.reverse()  
                    this.list.push(...arr)  
                }  
            },  
            _resetPage() {  
                console.log("重置")  
                this.history = List(201)  
                let arr = JSON.parse(JSON.stringify(this.history.splice(-this.pageSize) || []))  
                arr.reverse()  
                this.list = arr  
            },  
            toBottom() {  
                let _this = this  
                this.scrollTop = -1  

                this.$nextTick(function() {  
                    _this.scrollTop = 0  
                })  

            }  
        }  
    }  
</script>  

<style lang="scss" scoped>  
    .fanzhuan {  
        transform: rotate(180deg);  
    }  

    .cnt-wrap {  
        height: 100vh;  
        max-height: 100vh;  
        width: 100vw;  
        background-image: linear-gradient(to top, #fff, rgba(229, 77, 66, .2));  
    }  

    .item-wrap {  

        display: flex;  
        justify-content: space-between;  
        align-items: flex-start;  

        margin: 0 40rpx 20rpx;  

        .spring {  
            flex: 1;  
        }  

        .bubble {  
            max-width: 66vw;  
            padding: 20rpx;  
            color: #fff;  
            font-size: 36rpx;  

            .image {  
                max-width: 100%;  
            }  

            &.left {  
                border-radius: 8rpx;  
                border-top-left-radius: 0;  
                background-color: mediumpurple;  
            }  

            &.right {  
                border-radius: 8rpx;  
                border-top-right-radius: 0;  
                background-color: seagreen;  
            }  
        }  

    }  
</style>