ionic-team / ionic-team/ionic-framework
bug: ion-infinite-scroll when loadmore data error. ionInfinite will be trigger many many times.
- Langage dominant
- TypeScript
- Étoiles
- 52.7k
- Forks
- 13.3k
- Merge moyen
- 1 j 15 h
- PR mergées (30 j)
- 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)
})
};
Guide de contribution
Ouvrir le guide de contribution
Évaluation
Cette issue n'a pas encore été évaluée.