uniapp上拉加载更多

<template>
    <view class="container">
        <view v-for="(item,index) in videoList" :key="index"> 
            <label style="display: block;width: 100%; height: 40px; background-color: saddlebrown;" >{{item}}</label>
        </view>  
        <view v-show="isLoadMore"> //loading加载提示处
            <uni-load-more :status="loadStatus"></uni-load-more>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                //列表
                videoList: ["1","2","3","4","1","2","3","4","1","2","3","4","1","2","3","4"],

                page: 1,
                pagesize: 10,
                loadStatus: 'loading', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
                isLoadMore: false, //是否加载中
            };
        },
        onload() {
            this.getVideoList()
        },

        onReachBottom() { //上拉触底函数
            console.log("上拉触底了。。。")
            if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
                this.isLoadMore = true
                this.page += 1
                this.getVideoList()
            }
        },

        methods: {
            getVideoList() {
                uni.request({
                    url: `${this.$baseUrl}/api-video/getlist?page=${this.page}&pagesize=${this.pagesize}`,
                    method: 'GET',
                    success: res => {
                        if (res.data.code == 200) {
                            if (res.data.data.list) {
                                this.videoList = this.videoList.concat(res.data.data.list)
                                if (res.data.data.list.length < this.pagesize) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
                                    this.isLoadMore = true
                                    this.loadStatus = 'nomore'
                                } else {
                                    this.isLoadMore = false
                                }
                            } else {
                                this.isLoadMore = true
                                this.loadStatus = 'nomore'
                            }
                        } else { //接口请求失败的处理
                            uni.showToast({
                                title: res.data.msg,
                                icon: 'none'
                            })
                            this.isLoadMore = false
                            if (this.page > 1) {
                                this.page -= 1
                            }
                        }
                    },
                    fail: () => { //接口请求失败的处理
                        uni.showToast({
                            title: '服务器开小差了呢，请您稍后再试',
                            icon: 'none'
                        })
                        this.isLoadMore = false
                        if (this.page > 1) {
                            this.page -= 1
                        }
                    },
                });
            },
        },
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 200rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    }

    .text-area {
        display: flex;
        justify-content: center;
    }

    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }
</style>