uniapp中分页触底加载的实现

uniapp小程序实现分页触底加载更多，使用生命周期中的onReachBottom来实现，主要使用vue3技术栈

<script setup>
    import {onShow,onReachBottom} from "@dcloudio/uni-app";
    import {ref} from 'vue'
    let page = ref(1),  //第几页
        pageSize = ref(10),  // 每页多少条
        total = ref(null),  //总条数
        articleList = ref([])  //数据

    onShow(() => {
        getArticles(1, pageSize.value)
    })

     onReachBottom(() => {
        if (page.value * pageSize.value >= total.value) {
            showMsg('没有更多数据了', 1500)
            setTimeout(() => {
                uni.hideLoading()
            }, 500)
        } else {
            if (page.value <= page.value - 1) {
                setTimeout(() => {
                    uni.hideLoading()
                }, 500)
            } else {
                uni.showLoading({
                    title: '加载中'
                });
                page.value++
                getArticles(page.value, pageSize.value)
            }
            setTimeout(() => {
                uni.hideLoading()
            }, 500)
        }
    })

    const getArticles = async (page, pageSize) => {
        let {
            body,
            code,
            message
        } = await globalProperties.$http({
            url: `/articles?page=${page}&pageSize=${pageSize}`,
            type: 'GET'
        })
        if (code === 200) {
            articleList.value = [...articleList.value, ...body.element] //注意此处的展开要＋之前数据
            total.value = body.total
        } else {
            showMsg(message)
        }
    }
</script>

<template>
  <view v-for="item in articleList" :key="item.articleid">
    <view class="des">
        {{item.articletitle}}
    </view>
  </view>
</template>