1. Pull-up loading
1. In the pages.json configuration file, configure the onReachBottomDistance for the page that needs to be paginated.
2. In the pages/Pagination/index page, declare the onReachBottom event processing function to monitor the bottom of the page
3. In the getObjList method, after the data request is successful, splice the old and new data.
4. Define the isLoading throttle.
5. Modify the getObjList method to open and close the throttle before and after requesting data.
6. Bottom in onReachBottom In the event, decide whether to initiate a request according to the state of the throttle valve
7. Determine whether the data is loaded, and modify the onReachBottom event processing function
2. Pull down to refresh
1. In the pages.json configuration file, configure the pull-down refresh effect for pages that require pagination
2. Listen to the page's onPullDownRefresh event handler
3. Modify the getObjList function, the applet will not close the drop-down by default, so you need to use cb to close it
3. Core code
<template>
<!-- 分页组件 -->
<view class="container">
<c-card
class="myCard"
title="分页测试"
v-for="(item, id) in objList"
:key="id"
>
{
{
item.age }}
</c-card>
<u-divider>没有更多了</u-divider>
</view>
</template>
<script lang="ts" setup>
import {
onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
import {
onMounted, ref } from "vue";
import cCard from "@/components/common/cCard";
// 分页请求对象
interface IQueryObj {
pageNum: number;
pageSize: number;
}
onMounted(() => {
getObjList();
});
// 上拉加载
onReachBottom(() => {
// 判断是否还有下一页数据
if (queryObj.value.pageNum * queryObj.value.pageSize >= total.value)
return console.log("数据加载完毕！");
// 判断是否在请求数据
if (isLoding.value) return;
// 页码值自增
queryObj.value.pageNum += 1;
// 重新获取列表数据
getObjList();
});
// 下拉刷新
onPullDownRefresh(() => {
// 重置数据
queryObj.value.pageNum = 1;
total.value = 0;
isLoding.value = false;
objList.value = [];
// 重新发起请求,并手动关闭下拉刷新
getObjList(() => uni.stopPullDownRefresh());
});
const objList = ref<any[]>([]);
const total = ref(0);
const isLoding = ref(false);
const queryObj = ref<IQueryObj>({
pageNum: 1,
pageSize: 10,
});
// 获取列表数据
const getObjList = (cb?: any) => {
uni.showLoading({
});
// 打开节流阀
isLoding.value = true;
// 发送请求
const temList = mockData();
setTimeout(function () {
uni.hideLoading();
}, 1000);
// 关闭节流阀
isLoding.value = false;
// 是否调用回调函数
cb && cb();
// 拼接新旧数据
objList.value = [...objList.value, ...temList.value];
};
// 模拟数据
const mockData = () => {
const temList = ref<any[]>([]);
for (let i = 1; i <= 10; i++) {
const temObj = ref({
age: objList.value.length + i,
});
temList.value = [...temList.value, temObj.value];
}
total.value = 100;
return temList;
};
</script>
<style lang="scss" scoped>
.container {
padding-top: 30rpx;
width: 100%;
min-height: 100vh;
background: $conch-background-color;
.myCard {
margin: 20rpx auto;
}
}
</style>