ionic2 之 List

List 标签

例子如下:

  <!-- 下拉刷新-->
<ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content></ion-refresher-content>
 </ion-refresher>
   <!--列表-->
<ion-list>
<!-- 这里还可以嵌入一个 header,这相当于 tableview 的 header<ion-list-header>-->
    <ion-item-group *ngFor="let group of schoolGroups">
      <!--ion-item-divider 类似 iOS tableview 的 section header-->
      <ion-item-divider color="light" sticky width>
        <h3>
        {{ group.id }} - {{ group.name }}
      </h3>
      </ion-item-divider>
      <ion-item-sliding *ngFor="let school of group.school">
      <ion-item>
        <ion-label>{{ school.name }}
          <p>{{ school.id.toString() }}</p>
        </ion-label>
      </ion-item>
        <ion-item-options side="left">
          <button ion-button color="favorite" (click)="onFavorite(school)">Favorite</button>
        </ion-item-options>
        <ion-item-options side="right">
          <button ion-button color="primary">
            <ion-icon name="mail"></ion-icon>
            Email
          </button>
        </ion-item-options>
      </ion-item-sliding>
    </ion-item-group>
    <ion-list-header *ngIf="schoolGroups.length < 1">
        全国大学中没有名字中含有 "{{ queryText }} "的大学
    </ion-list-header>
  </ion-list>

运行结果如图:
这里写图片描述

去掉 cell 之间的横线

<ion-list no-lines="true">
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值