ion-infinite-scroll-content
Ionic4项目中我们可以使用Ionic4上拉分页组件ion-infinite-scroll-content对项目进行布局。 ion-infinite-scroll-content官方文档地址:https://ionicframework.com/docs/api/infinite-scroll-contentThe ion-infinite-scroll-content component is the default child used by the ion-infinite-scroll. It displays an infinite scroll spinner that looks best based on the platform and changes the look depending on the infinite scroll's state. The default spinner can be changed and text can be added by setting the loadingSpinner and loadingText properties.
ion-infinite-scroll-content 用法(Usage)
<ion-content>
<ion-infinite-scroll>
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="Loading more data…">
ion-infinite-scroll-content>
ion-infinite-scroll>
ion-content><ion-content>
<ion-infinite-scroll>
<ion-infinite-scroll-content
loading-spinner="bubbles"
loading-text="Loading more data…">
ion-infinite-scroll-content>
ion-infinite-scroll>
ion-content>import React from 'react';
import { IonContent, IonInfiniteScroll } from '@ionic/react';
const Example: React.SFC<{}> = () => (
<IonContent>
<IonInfiniteScroll>
<IonInfiniteScrollContent
loadingSpinner="bubbles"
loadingText="Loading more data…">
IonInfiniteScrollContent>
IonInfiniteScroll>
IonContent>
);
export default Example<template>
<ion-content>
<ion-infinite-scroll>
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="Loading more data…">
ion-infinite-scroll-content>
ion-infinite-scroll>
ion-content>
template>ion-infinite-scroll-content 属性(Properties)
loadingSpinner | |
|---|---|
| Description | An animated SVG spinner that shows while loading. |
| Attribute | loading-spinner |
| Type | "bubbles" | "circles" | "crescent" | "dots" | "lines" | "lines-small" | null | undefined |
loadingText | |
| Description | Optional text to display while loading.
For more information: Security Documentation |
| Attribute | loading-text |
| Type | string | undefined |