Prerequisites
Ionic Framework Version
v8.x
Current Behavior
trigger many many times
Expected Behavior
do not trigger
Steps to Reproduce
pull up loadmore
Code Reproduction URL
1
Ionic Info
1
Additional Information
首页
{{ item.name }}
<script setup lang="ts">
import {
IonPage,
IonList,
IonButton,
IonItem,
IonHeader,
IonTitle,
IonToolbar,
IonRefresher,
IonContent,
IonRefresherContent,
RefresherCustomEvent,
IonInfiniteScroll,
IonInfiniteScrollContent, InfiniteScrollCustomEvent
} from "@ionic/vue"
import LoadStatus from '@/components/load-status/load-status.vue';
import {useLoadStatus} from "@/components/load-status/useLoadStatus"
import {chevronDownCircleOutline} from "ionicons/icons"
// 模拟请求数据的接口客户端
const loadImpl = async (endpoint: string, p: { page: number; size: number }) => {
// 模拟网络请求延迟
await new Promise(resolve => setTimeout(resolve, 1000));
// throw new Error("接口请求失败");
// return []
console.log(`请求接口 ${endpoint}，页码: ${p.page}, 每页大小: ${p.size}`);
if (p.page >= 2) {
throw new Error(`接口请求失败=${p.page}`);
}
// 模拟分页数据
const totalItems = 45; // 假设总共有45条数据
const start = (p.page - 1) * p.size
const end = start + p.size
const items = Array.from({length: totalItems}, (_, i) => ({id: i + 1, name: `数据项 ${i + 1}`}));
return items.slice(start, end);
// const start = (page - 1) * size;
// const start = (curPage.value - 1) * pageSize;
// const end = start + pageSize;
// const items = Array.from({length: totalItems}, (_, i) => ({id: i + 1, name: `数据项 ${i + 1}`}));
// return items.slice(start, end);
};
// Dashboard 数据请求配置
const {data, status, error, hasMore, hasData, isLoadingMore, refresh, loadNextPage} = useLoadStatus({
fetcher: async (curPage, pageSize) => {
// 支持分页
const res = await loadImpl('/dashboard', {page: curPage!, size: pageSize!});
return res;
},
pageSize: 20,
autoFetch: true
});
const handleRefresh = (event: RefresherCustomEvent) => {
refresh().then(() => {
event.target.complete();
});
};
const ionInfinite = (event: InfiniteScrollCustomEvent) => {
// generateItems();
// setTimeout(() => event.target.complete(), 500);
console.log("触发上拉加载更多");
loadNextPage().then(() => {
console.log("加载下一页完成");
event.target.complete();
// setTimeout(() => {
// event.target.disabled = false
// }, 2000)
})
};
</script>
