Ionic - Javascript 列表

我们在前面的章节中已经讨论了 Ionic CSS 列表元素。在本章中，我们将向您展示 JavaScript 列表。它们允许我们使用一些新特性，如 swipe、drag 和 remove。

使用列表

用于显示列表和列表项的指令是 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 指令来添加此按钮。您可以使用任何想要的 icon class。由于我们并不总是想显示删除按钮，因为用户可能会意外点击它并触发删除过程，因此我们可以为 ion-list 添加 show-delete 属性，并将其与 ng-model 关联。

在下面的示例中，我们将使用 ion-toggle 作为 model。当 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 属性，每当用户拖动该元素时，该属性将触发 controller 中的 function。

<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 directive 的升级版本。它只会渲染屏幕上可见的元素，其余元素会在滚动时更新。这是在处理大型列表时的重要性能改进。该指令可以与 item-width 和 item-height 属性结合使用，进一步优化列表项。

还有一些其他有用的属性，用于在列表中处理图像。item-render-buffer 函数表示在可见项之后加载的项数。该值越高，预加载的项就越多。force-refresh-images 函数会在滚动时修复图像源的问题。这两个 class 都会以负面方式影响性能。