ion-infinite-scroll

當使用者從頁面底部或頂部捲動到指定距離時，無限捲動元件會呼叫要執行的動作。

當使用者到達定義的距離時，會呼叫指派給 ionInfinite 事件的表達式。當此表達式完成任何及所有工作後，應呼叫無限捲動實例上的 complete() 方法。

載入文字和旋轉圖示

ion-infinite-scroll-content 負責無限捲動互動的視覺顯示。預設情況下，此元件會根據無限捲動的狀態變更其外觀。它會顯示一個旋轉圖示，該圖示看起來最適合使用者所在的平台。旋轉圖示和載入文字都可以透過在 ion-infinite-scroll-content 元件上設定屬性來自訂。

自訂內容

如果開發人員想要，則分離 ion-infinite-scroll 和 ion-infinite-scroll-content 元件可讓他們建立自己的內容元件。此內容可以包含任何項目，從 SVG 元素到具有獨特 CSS 動畫的元素。

與虛擬捲動搭配使用

無限捲動需要捲動容器。當使用虛擬捲動解決方案時，您需要停用 ion-content 上的捲動，並使用 .ion-content-scroll-host 類別目標指示哪個元素容器負責捲動容器。

<ion-content scroll-y="false">
  <virtual-scroll-element class="ion-content-scroll-host">
    <!-- Your virtual scroll content -->
  </virtual-scroll-element>
  <ion-infinite-scroll>
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

注意

virtual-scroll-element 是指負責捲動內容的捲動容器。這可能是您正在使用的虛擬捲動解決方案直接提供的元件。

協助工具

開發人員應將 role="feed" 屬性指派給使用者捲動時新增或移除的可捲動項目清單。

個別清單項目應具有 role="article" 或直接使用 <article> 元素。

例如，當在 ion-list 中呈現項目集合時

<ion-content role="feed">
  <ion-list>
    <ion-item role="article">
      First item
    </ion-item>
    <ion-item role="article">
      Second item
    </ion-item>
    ...
  </ion-list>

  <ion-infinite-scroll>
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

如需其他資訊，請參閱 ARIA：feed 角色 文件。

介面

InfiniteScrollCustomEvent

雖然不是必要，但此介面可以用來取代 CustomEvent 介面，以便使用此元件發出的 Ionic 事件進行更強的類型設定。

interface InfiniteScrollCustomEvent extends CustomEvent {
  target: HTMLIonInfiniteScrollElement;
}

屬性

disabled

描述	如果為 true，則會隱藏無限捲動，並移除捲動事件接聽程式。 當已知沒有更多可以新增的資料，且不再需要無限捲動時，將此設為 true 可以停用無限捲動主動嘗試在捲動時接收新資料。這很有用。
屬性	disabled
類型	布林值
預設值	false

position

描述	無限捲動元素的位置。值可以是 top 或 bottom。
屬性	position
類型	"bottom" ｜ "top"
預設值	'bottom'

threshold

描述	從內容底部捲動時呼叫 infinite 輸出事件的臨界值距離。臨界值可以是百分比或像素。例如，使用 10% 的值，以便在使用者從頁面底部捲動 10% 時呼叫 infinite 輸出事件。當捲動距離頁面底部 100 像素時，請使用值 100px。
屬性	threshold
類型	字串
預設值	'15%'

事件

名稱	描述	泡泡
ionInfinite	當捲動到達臨界值距離時發出。從無限處理常式中，當您的非同步操作完成時，您必須呼叫無限捲動的 complete() 方法。	true

方法

complete

描述	當您的非同步操作完成時，請在 ionInfinite 輸出事件處理常式中呼叫 complete()。例如，當應用程式正在執行非同步操作時，例如從 AJAX 要求接收更多資料，以將更多項目新增至資料清單時，loading 狀態是處於啟用狀態。一旦接收到資料並更新 UI 後，您就會呼叫此方法，以表示載入已完成。此方法會將無限捲動的狀態從 loading 變更為 enabled。
簽章	complete() => Promise<void>

CSS 陰影部分

此元件沒有可用的 CSS 陰影部分。

CSS 自訂屬性

此元件沒有可用的 CSS 自訂屬性。

插槽

此元件沒有可用的插槽。