ionic3之列表案例-yellowcong

列表显示，无论是在手机还是web等，都是很常见的一种布局方式，现在我就简单做一个ionic的列表案例和一个复杂的带头像的列表案例。同时还使用了*ngFor和*ngIf两个，一起来处理list的列表显示。

代码地址

https://gitee.com/yellowcong/ionic/tree/master/ionic3-list

目录结构，这个地方，我将list案例都放到了一个文件夹下面了。

准备工作

1、创建一个新界面：

2、界面跳转：

案例1-普通列表

在列表中，我们可以通过*ngFor的方式，将列表的数据直接读取出来，而且还可以通过*ngIf的方式来判断是否满足条件的情况。

创建界面（list1.html）

界面中，可以 通过*ngFor这个语法，来遍历数组里面的数据。

<ion-header><ion-navbar><ion-title>列表案例1ion-title>ion-navbar>ion-header><ion-content><h1>简单h1><div *ngFor="let item of numbers">{{item}}div>ion-content>

后端（list1.ts）

这个后台代码我们需要注意的是这个钩子函数，每次调用后，就是一个新的界面，然后还有一点，这个参数，和前台引用的需要一一对应，不然就会找不到了。

//@angular/core是一个npm的模块，定义了angular的核心功能
import { Component } from '@angular/core';//NavController就是用来管理和导航页面的一个controlle
//NavParams 这个是参数
import { NavController,NavParams} from 'ionic-angular';@Component({selector: 'page-list',templateUrl: 'list1.html'})
//export关键词：将类暴露出去，以便其它的文件可以import到它。
//类的命名：在ionic3中，页面类采用页面名+Page的命名方式，首字母大写，如HomePage, ContactPage等。
export class List1Page {numbers =  [1,2,3,4,5,6];constructor(public navCtrl: NavController,public params:NavParams) {}//当这个钩子被触发的时候，用户已经进入到新页面了（页面处于激活状态），同样也是每次都会调用。ionViewDidEnter(){setInterval(()=>{//每间隔1000ms，就添加一个数字 ,不要在el表达式里面添加注释，不然就会报错this.numbers.push(this.numbers.length+1);},1000)}}

实现效果

案例2（带头像的复杂列表） 前台代码（list2.html）

前台代码需要注意的就是，如何做带有图片的列表，而且如何绑定点击事件，等事件。

<ion-header><ion-navbar><ion-title>列表案例2ion-title>ion-navbar>ion-header><ion-content><h1>复杂列表h1><ion-list><ion-item (click)="clickItem(item)"  *ngFor="let item of users"><ion-avatar  item-start><img src="{{item.img}}">ion-avatar><h2>{{item.name}}h2><p>{{item.description}}p><p item-end>{{item.gender?'男':'女'}}, {{year_now - item.age}} 岁p>ion-item>ion-list>ion-content>

后台代码（list2.ts）

后台代码不仅绑定了数据，而且还做了点击后，通过toast提示选中了哪一条数据。

//@angular/core是一个npm的模块，定义了angular的核心功能
import { Component } from '@angular/core';//NavController就是用来管理和导航页面的一个controlle
//NavParams 这个是参数
import { NavController,NavParams,ToastController  } from 'ionic-angular';@Component({selector: 'page-list2',templateUrl: 'list2.html'})
//export关键词：将类暴露出去，以便其它的文件可以import到它。
//类的命名：在ionic3中，页面类采用页面名+Page的命名方式，首字母大写，如HomePage, ContactPage等。
export class List2Page {users:any = [{name:'小明',age:'1970', gender:'1', description:'逗比',img:"http://www.runoob.com/try/demo_source/venkman.jpg"},{name:'小王',age:'1992', gender:'0', description:'王逗比',img:"http://www.runoob.com/try/demo_source/spengler.jpg"},{name:'yellowcong',age:'1994', gender:'1', description:'三炮',img:"http://www.runoob.com/try/demo_source/stantz.jpg"},];//当前日期year_now;constructor(public navCtrl: NavController,public params:NavParams,private toastCtrl:ToastController) {this.year_now = new Date().getFullYear();}//当这个钩子被触发的时候，用户已经进入到新页面了（页面处于激活状态），同样也是每次都会调用。ionViewDidEnter(){}//点击了哪一条消息clickItem(item){console.log(item);this.showInfo(item.name);}//显示toast消息showInfo(name){let toast = this.toastCtrl.create({message: '点击了'+name, //提示消息duration: 3000,//3秒后自动消失position: 'bottom',//位置top,bottomshowCloseButton:true, //是否显示关闭按钮closeButtonText:"关闭" //关闭按钮字段});//关闭后执行的操作toast.onDidDismiss(() => { console.log('toast被关闭之后执行'); });//显示toasttoast.present();//符合触发条件后立即执行显示。}
}

样式代码（list2.scss）

这个地方，设定每个条目选中后的背景颜色是 黄色的

.item:hover{background: yellow;
} 

实现效果

案例3（带条件的*ngFor）

这儿要说明的是，在中，*ngFor 和 *ngIf 不能放置在同一个标签上(Vue之类的框架则可以)，因此在 ion-item 外加上一个“虚拟”的标签 ng-, 它自身不会被渲染到DOM中，只会渲染它包裹的内容（类似Vue中的 标签）。因此在没有 ngIf 的情况下，把 ngFor 指令加在 ion-item 上和加在外层的 ng- 标签上效果是等同的；而在有 ngIf 指令的情况下，可以通过 ng-标签避免两个指令的冲突。

前台代码（list3）

这个案例后第二个案例差不多，只是前台改了一下，加了判断条件,对于大于1990的才显示。

<ion-header><ion-navbar><ion-title>列表案例2ion-title>ion-navbar>ion-header><ion-content><h1>复杂列表,只显示90后的数据h1><ion-list><ng-container *ngFor="let item of users"><ion-item (click)="clickItem(item)"  *ngIf="item.age > 1990"><ion-avatar  item-start><img src="{{item.img}}">ion-avatar><h2>{{item.name}}h2><p>{{item.description}}p><p item-end>{{item.gender?'男':'女'}}, {{year_now - item.age}} 岁p>ion-item>ng-container>ion-list>ion-content>

实现的效果

参考文章