ionic3之列表案例-yellowcong

- 日理万妓 2022-05-31 12:50 348阅读 0赞

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

## 代码地址 ##

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

目录结构，这个地方，我将list案例都放到了一个文件夹下面了。  
![这里写图片描述][70]

## 准备工作 ##

1、创建一个新界面：[http://blog.csdn.net/yelllowcong/article/details/79358776][http_blog.csdn.net_yelllowcong_article_details_79358776]  
2、界面跳转：[http://blog.csdn.net/yelllowcong/article/details/79359383][http_blog.csdn.net_yelllowcong_article_details_79359383]

## 案例1-普通列表 ##

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

### 创建界面（list1.html） ###

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

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

### 后端（list1.ts） ###

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

### 实现效果 ###

![这里写图片描述][SouthEast]

## 案例2（带头像的复杂列表） ##

### 前台代码（list2.html） ###

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

<ion-header> <ion-navbar> <ion-title> 列表案例2 </ion-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,bottom
                showCloseButton:true, //是否显示关闭按钮
                closeButtonText:"关闭" //关闭按钮字段
            });
    
            //关闭后执行的操作
            toast.onDidDismiss(() => { console.log('toast被关闭之后执行'); });
    
            //显示toast
            toast.present();//符合触发条件后立即执行显示。
        }
    }

### 样式代码（list2.scss） ###

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

.item:hover{ background: yellow; }

### 实现效果 ###

![这里写图片描述][SouthEast 1]

## 案例3（带条件的\*ngFor） ##

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

### 前台代码（list3） ###

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

<ion-header> <ion-navbar> <ion-title> 列表案例2 </ion-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>

### 实现的效果 ###

![这里写图片描述][70 1]

## 参考文章 ##

[https://www.jianshu.com/p/ff3237a3e7dd][https_www.jianshu.com_p_ff3237a3e7dd]

[70]: /images/20220531/cfd250ed591c45e49b2c94a53677b629.png
[http_blog.csdn.net_yelllowcong_article_details_79358776]: http://blog.csdn.net/yelllowcong/article/details/79358776
[http_blog.csdn.net_yelllowcong_article_details_79359383]: http://blog.csdn.net/yelllowcong/article/details/79359383
[SouthEast]: /images/20220531/31e5e8f4ebf34a30852ab83f5a00222b.png
[SouthEast 1]: /images/20220531/8977d907cbf448c8ae763731e801db78.png
[70 1]: /images/20220531/7fd6b72a4267467a970d07786c67a653.png
[https_www.jianshu.com_p_ff3237a3e7dd]: https://www.jianshu.com/p/ff3237a3e7dd