ionic-team / ionic-team/ionic-framework

bug: ion-infinite-scroll when loadmore data error. ionInfinite will be trigger many many times.

Open
#31,013 1 comment 0 reactions 0 assignees View on GitHub
ionitron: needs reproduction
Dominant language
TypeScript
Stars
52.7k
Forks
13.3k
Avg merge
1d 15h
Merged PRs (30d)
51

Description

### Prerequisites

- [x] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [x] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [x] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.

### 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 }}


















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<any>({
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)
})
};

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.