Ionic - Danh sách Javascript

Chúng ta đã thảo luận về các phần tử danh sách CSS Ionic trong các chương trước. Trong chương này, chúng tôi sẽ cho bạn thấy danh sách JavaScript. Chúng cho phép chúng tôi sử dụng một số tính năng mới nhưswipe, dragremove.

Sử dụng danh sách

Các lệnh được sử dụng để hiển thị danh sách và các mục là ion-listion-item như hình bên dưới.

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

Đoạn mã trên sẽ tạo ra màn hình sau:

Nút Xóa

Nút này có thể được thêm vào bằng cách sử dụng ion-delete-buttonchỉ thị. Bạn có thể sử dụng bất kỳ lớp biểu tượng nào bạn muốn. Vì chúng tôi không phải lúc nào cũng muốn hiển thị các nút xóa, vì người dùng có thể vô tình chạm vào nó và kích hoạt quá trình xóa, chúng tôi có thể thêmshow-delete thuộc tính cho ion-list và kết nối nó với ng-model.

Trong ví dụ sau, chúng tôi sẽ sử dụng ion-togglenhư một người mẫu. Khi bật chuyển đổi xóa, các nút sẽ xuất hiện trên các mục danh sách của chúng tôi.

<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>

Đoạn mã trên sẽ tạo ra màn hình sau:

Nút sắp xếp lại

Lệnh Ionic cho nút sắp xếp lại là ion-reorder-button. Phần tử chúng tôi đã tạo cóon-reorder thuộc tính sẽ kích hoạt chức năng từ bộ điều khiển của chúng tôi bất cứ khi nào người dùng kéo phần tử này.

<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);
};

Đoạn mã trên sẽ tạo ra màn hình sau:

Khi chúng ta nhấp vào biểu tượng ở bên phải, chúng ta có thể kéo phần tử và di chuyển nó đến một số vị trí khác trong danh sách.

Nút tùy chọn

Nút Tùy chọn được tạo bằng cách sử dụng ion-option-buttonchỉ thị. Các nút này được hiển thị khi mục danh sách được vuốt sang trái và chúng ta có thể ẩn nó một lần nữa bằng cách vuốt phần tử mục sang phải.

Bạn có thể thấy trong ví dụ sau rằng có hai nút bị ẩn.

<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>

Đoạn mã trên sẽ tạo ra màn hình sau:

Khi chúng ta vuốt phần tử mục sang trái, văn bản sẽ được di chuyển sang trái và các nút sẽ xuất hiện ở phía bên phải.

Cac chưc năng khac

Các collection-repeat chức năng là một phiên bản cập nhật của AngularJS ng-repeat directive. Nó sẽ chỉ hiển thị các phần tử hiển thị trên màn hình và phần còn lại sẽ được cập nhật khi bạn cuộn. Đây là một cải tiến hiệu suất quan trọng khi bạn đang làm việc với các danh sách lớn. Chỉ thị này có thể được kết hợp vớiitem-widthitem-height để tối ưu hóa hơn nữa các mục trong danh sách.

Có một số thuộc tính hữu ích khác để làm việc với hình ảnh bên trong danh sách của bạn. Cácitem-render-bufferhàm đại diện cho số lượng mục được tải sau các mục hiển thị. Giá trị này càng cao, càng nhiều mục sẽ được tải trước. Cácforce-refresh-imageschức năng sẽ khắc phục sự cố với nguồn hình ảnh trong khi cuộn. Cả hai lớp này sẽ ảnh hưởng đến hiệu suất theo cách tiêu cực.