Ionic Javascript列表 Ionic Javascript键盘 Ionic Javascript加载 我们已经在前面的章节中讨论过Ionic CSS list元素。在本章中,我们将向您展示JavaScript列表。它们允许我们使用一些新功能,如 滑动 , 拖动 和 删除 。 使用List 用于显示列表和项目的指令是 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 属性添加到 Ionic列表 并将其与 ng-model连接 。 在以下示例中,我们将使用 Ionic切换 作为模型。当切换开启删除时,按钮将出现在我们的列表项上。 <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指令是 Ionic重新排序按钮 。我们创建的元素有一个 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 指令创建Option按钮。当列表项向左滑动时会显示这些按钮,我们可以通过向右滑动项元素来再次隐藏它。 您可以在以下示例中看到有两个隐藏的按钮。 <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> 上面的代码将生成以下屏幕 - 当我们向左滑动item元素时,文本将向左移动,按钮将显示在右侧。 其他功能 该 集合重复 功能是更新版本的 AngularJS NG重复指令 。它只会在屏幕上呈现可见元素,其余部分将在您滚动时更新。使用大型列表时,这是一项重要的性能改进。该指令可以与 item-width 和 item-height 属性结合使用,以进一步优化列表项。 还有一些其他有用的属性可用于处理列表中的图像。该 项目渲染缓冲 功能表示在可见的项目后加载的项数。该值越高,预加载的项目就越多。该 部队刷新图像 而滚动功能将修复与图像的源的问题。这两个类都会以负面的方式影响性能。 Ionic Javascript键盘 Ionic Javascript加载