ion-list

关联: (ionic-china中文网文档)$ionicListDelegate.

See the Pen by Ionic (@ionic) on CodePen.

列表是一个应用广泛在几乎所有移动app中的界面元素。ionListionItem这两个指令还支持多种多样的交互模式,比如移除其中的某一项,拖动重新排序,滑动编辑等等。

相关:(ionic-china中文网文档)ionItem, (ionic-china中文网文档)ionOptionButton ionReorderButton, ionDeleteButton, list CSS documentation.

实例该文档来自ionic中文网ionic-china

基本用法:

<ion-list>
  <ion-item ng-repeat="item in items">
    Hello, {{item}}!
  </ion-item>
</ion-list>

高级用法:缩略图,删除按钮,重新排序,滑动

<ion-list ng-controller="MyCtrl"
          show-delete="shouldShowDelete"
          show-reorder="shouldShowReorder"
          can-swipe="listCanSwipe">
  <ion-item ng-repeat="item in items"
            class="item-thumbnail-left">

    <img ng-src="{{item.img}}">
    <h2>{{item.title}}</h2>
    <p>{{item.description}}</p>
    <ion-option-button class="button-positive"
                       ng-click="share(item)">
      Share
    </ion-option-button>
    <ion-option-button class="button-info"
                       ng-click="edit(item)">
      Edit
    </ion-option-button>
    <ion-delete-button class="ion-minus-circled"
                       ng-click="items.splice($index, 1)">
    </ion-delete-button>
    <ion-reorder-button class="ion-navicon"
                        on-reorder="reorderItem(item, $fromIndex, $toIndex)">
    </ion-reorder-button>

  </ion-item>
</ion-list>
app.controller('MyCtrl', function($scope) {
 $scope.shouldShowDelete = false;
 $scope.shouldShowReorder = false;
 $scope.listCanSwipe = true
});

API

属性 类型 说明
delegate-handle
(可空)
string

该句柄定义带有$ionicListDelegate的列表

type
(可空)
string

列表类型 (list-insetcard)

show-delete
(可空)
boolean

列表项的删除按钮当前是显示还是隐藏

show-reorder
(可空)
boolean

列表项的排序按钮当前是显示还是隐藏

can-swipe
(可空)
boolean

列表项是否被允许滑动显示选项按钮 默认:true