跳至主要內容
版本:v8

ion-reorder

陰影

重新排序是一個元件,允許拖曳項目以變更項目群組內的順序。它必須在重新排序群組中使用,以提供視覺化的拖放介面。

重新排序是拖放項目的錨點。重新排序完成後,`ionItemReorder` 事件將從重新排序群組中發出,並且需要呼叫 `complete` 方法。

基本用法

重新排序最基本的範例是將其插入項目內。依預設,重新排序群組的重新排序功能會停用。可以透過將重新排序群組的 `disabled` 屬性設定為 `false` 來啟用。然後可以使用重新排序圖示來拖放項目並重新排序。

主控台
從上述範例記錄時,主控台訊息將會顯示在此處。

切換重新排序

在某些情況下,可能需要選擇性地切換重新排序功能。這可以透過使 `disabled` 屬性根據函數或變數產生反應來完成。

主控台
從上述範例記錄時,主控台訊息將會顯示在此處。

自訂重新排序圖示

重新排序元件在 iOS 上使用三條線的重新排序圖示,在 Material Design 上則使用兩條線。可以透過在重新排序內新增一個圖示元件,並使用任何可用的 Ionicons 來進行自訂。

主控台
從上述範例記錄時,主控台訊息將會顯示在此處。

重新排序包裝函式

重新排序也可以用作項目周圍的包裝函式,使項目本身成為錨點。按一下下方項目上的任何位置,然後拖曳它以重新排序清單。

主控台
從上述範例記錄時,主控台訊息將會顯示在此處。

更新資料

當在沒有參數的情況下於重新排序群組上呼叫 `complete` 方法時,DOM 節點將會重新排序。如果這些項目是從需要排序的資料陣列轉譯而來,可能會導致資料和 DOM 不同步。

為了在重新排序完成後對陣列進行排序,應該將陣列作為參數傳遞至 `complete` 方法。`complete` 方法將對陣列進行排序並傳回它,以便重新指派。請注意,傳遞陣列將會阻止 Ionic 重新排序 DOM 節點。

在某些情況下,應用程式可能需要自行重新排序陣列和 DOM 節點。如果需要這樣做,則應將 `false` 作為參數傳遞至 `complete` 方法。這將阻止 Ionic 重新排序重新排序群組內的任何 DOM 節點。

無論採用哪種方法,如果以迴圈提供,都應該為重新排序的項目提供穩定的身分。這表示 Angular 使用 `trackBy`,而 React 和 Vue 使用 `key`。

主控台
從上述範例記錄時,主控台訊息將會顯示在此處。

搭配虛擬捲動使用

重新排序需要捲動容器才能正常運作。當使用虛擬捲動解決方案時,需要提供自訂捲動目標。需要停用內容上的捲動,並且需要將 `.ion-content-scroll-host` 類別新增至負責捲動的元素。

主控台
從上述範例記錄時,主控台訊息將會顯示在此處。

屬性

此元件沒有可用的屬性。

事件

此元件沒有可用的事件。

方法

此元件沒有可用的公用方法。

CSS 陰影部分

名稱描述
icon重新排序控點的圖示(使用 ion-icon)。

CSS 自訂屬性

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

插槽

此元件沒有可用的插槽。