Ionic - JavaScript 列表

我們已經在前面的章節中討論了 Ionic CSS 列表元素。本章將向您展示 JavaScript 列表。它們允許我們使用一些新功能，例如滑動、拖動和刪除。

使用列表

用於顯示列表和專案的指令如下所示：ion-list 和 ion-item。

<ion-list>
   <ion-item>
      Item 1 
   </ion-item>
	
   <ion-item>
      Item 2 
   </ion-item>
	
   <ion-item>
      Item 3  
   </ion-item>
</ion-list>

以上程式碼將生成以下螢幕：

刪除按鈕

此按鈕可以使用ion-delete-button指令新增。您可以使用任何您想要的圖示類。由於我們並不總是想顯示刪除按鈕，因為使用者可能會意外點選它並觸發刪除過程，所以我們可以將show-delete屬性新增到ion-list並將其與ng-model連線。

在下面的示例中，我們將使用ion-toggle作為模型。當切換開啟刪除時，刪除按鈕將出現在我們的列表項上。

<ion-list show-delete = "showDelete1">
   <ion-item>
      <ion-delete-button class = "ion-minus-circled"></ion-delete-button>
      Item 1
   </ion-item>
	
   <ion-item>
      <ion-delete-button class = "ion-minus-circled"></ion-delete-button>
      Item 2
   </ion-item>
</ion-list>

<ion-toggle ng-model = "showDelete2">
   Show Delete 2
</ion-toggle>

以上程式碼將生成以下螢幕：

重新排序按鈕

Ionic 的重新排序按鈕指令是ion-reorder-button。我們建立的元素具有on-reorder屬性，每當使用者拖動此元素時，它都會觸發我們控制器中的函式。

<ion-list show-reorder = "true">
   <ion-item ng-repeat = "item in items">
      Item {{item.id}}
      <ion-reorder-button class = "ion-navicon" 
         on-reorder = "moveItem(item, $fromIndex, $toIndex)"></ion-reorder-button>
   </ion-item>
</ion-list>

$scope.items = [
   {id: 1},
   {id: 2},
   {id: 3},
   {id: 4}
];

$scope.moveItem = function(item, fromIndex, toIndex) {
   $scope.items.splice(fromIndex, 1);
   $scope.items.splice(toIndex, 0, item);
};

以上程式碼將生成以下螢幕：

當我們點選右側的圖示時，我們可以拖動元素並將其移動到列表中的其他位置。

選項按鈕

選項按鈕是使用ion-option-button指令建立的。這些按鈕在列表項向左滑動時顯示，我們可以透過將專案元素向右滑動將其再次隱藏。

在下面的示例中，您可以看到有兩個隱藏的按鈕。

<ion-list>
   <ion-item>
      Item with two buttons...
      <ion-option-button class = "button-positive">Button 1</ion-option-button>
      <ion-option-button class = "button-assertive">Button 2</ion-option-button>
   </ion-item>
</ion-list>

以上程式碼將生成以下螢幕：

當我們將專案元素向左滑動時，文字將向左移動，按鈕將出現在右側。

其他功能

collection-repeat函式是AngularJS ng-repeat指令的更新版本。它只渲染螢幕上可見的元素，其餘元素將在滾動時更新。當您使用大型列表時，這是一個重要的效能改進。此指令可以與item-width和item-height屬性結合使用，以進一步最佳化列表項。

還有一些其他有用的屬性可用於處理列表中的影像。item-render-buffer函式表示在可見專案之後載入的專案數量。此值越高，預載入的專案就越多。force-refresh-images函式將在滾動時修復影像源的問題。這兩個類都會對效能產生負面影響。