ion-list
授权: $ionicListDelegate

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

列表是一个应用广泛在几乎所有移动app中的界面元素,可以包含的内容范围从基本文字到按钮,开关,图标和缩略图在内所有内容。

包含列表项的列表以及列表项自身都可以是任何的HTML元素。容器元素需要list类,并且每个列表项需要item类。

然而,使用ionList和ionItem可以很容易的支持各种交互方式,比如,滑动编辑,拖动排序,以及删除项。

相关阅读: ionItem, ionOptionButton ionReorderButton, ionDeleteButton, list CSS documentation.

用法

基本用法:

<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)">
      分享
    </ion-option-button>
    <ion-option-button class="button-info"
                       ng-click="edit(item)">
      编辑
    </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>

API

属性 类型 详情
delegate-handle
(可选)
字符串

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

show-delete
(可选)
布尔值

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

show-reorder
(可选)
布尔值

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

can-swipe
(可选)
布尔值

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