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>
