uni-app上划加載分頁效果

html部分：

// 列表組件
<dataList ref="course" :courseList="courseList" />
// 分頁加載更多組件(該組件要去插件市場安裝)
<uni-load-more v-if="courseList.length > 5" :contentText="contentText" :status="status" />

js部分：

<script>
    // 引入列表組件(自己手寫)
    import dataList from './components/dataList'
    export default {
        components: {
            dataList
        },
        data() {
            status: 'more',
            contentText: {
                contentdown: "加載更多",
            contentrefresh: "正在加載...",
            contentnomore: "已經到底了喲QAQ~"
            },
            courseList: [],
            total: 0,
        pagination: {
        current: 1,
        size: 5
        },
        },
        onShow() {
        this.getData()
    },
    onReachBottom() {
        const { total } = this;
        const { current, size } = this.pagination;
        if (total > (current * size)) {
        this.status = 'loading';
        this.pagination.current++;
        this.getData(true);
        } else {
        this.status = 'noMore';
        }
    },
    methods: {
             async getData(more) {
        let res = await uni.service.home.getCourseList(this.pagination)
        if (res.code === 200) {
                    if (more) {
                        this.courseList = this.courseList.concat(res.data.records);
                    } else {
                        this.courseList = res.data.records
                    }
                        this.total = res.data.total;
            this.status = 'more';
                }
            }
    }
    }
</script>