ionic-team / ionic-team/ionic-framework

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

Đang mở
#31,013 1 bình luận 0 reaction 0 người được giao Xem trên GitHub
ionitron: needs reproduction
Ngôn ngữ chính
TypeScript
Star
52.7k
Fork
13.3k
Merge trung bình
1 ngày 15 giờ
Pull request đã merge (30 ngày)
51

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.