ionic-team / ionic-team/ionic-framework

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

オープン
#31,013 コメント 1 件 リアクション 0 件 担当者 0 名 GitHub で見る
ionitron: needs reproduction
主要言語
TypeScript
スター
52.7k
フォーク
13.3k
平均マージ
1日 15時間
マージ済み PR(30日)
51

説明

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

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

Start with the provided Vue/TypeScript reproduction, focusing on the ionInfinite handler and its loadNextPage call when the simulated page-2 request rejects. Verify that the infinite-scroll event does not repeat after the load-more error; the issue names no repository source file or test to run.

索引モデルが issue の本文から書いたものです。

評価

技術スタック
typescript
領域
frontend
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
説明が足りない
初心者へのやさしさ
25/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。