【组件篇】ionic3均分列等宽高图像显示（下）
原文再续，书接上一回，上回讲到了“均分列等宽高图像显示（上）”，但是我埋了一个坑，各位看官有没有留意到？
那就是它依赖一个addImage（用于添加的仿按钮图像），如果我没有这个东西，逻辑上是不是就不能用了？是的！那为了使得这个组件能更通用些，改造一下：
旧的html：
<ion-row align-items-center>
<ion-col col-3 align-self-center *ngFor="let item of images, let i = index">
<ion-thumbnail tappable (click)="onViewImages(i)">
<img src="{{item?.originPath}}" class="auto-image" [style.height]="width"/>
</ion-thumbnail>
</ion-col>
<ion-col col-3 align-self-center>
<ion-thumbnail *ngIf="images && images.length<max && canAdd" tappable (click)="onAddImage()">
<img #addImage src="assets/imgs/add.png" class="auto-image"/>
</ion-thumbnail>
</ion-col>
</ion-row>img都定义变量为#image，同时移除[style.height]="width"，变成新的：
<ion-row align-items-center>
<ion-col col-3 align-self-center *ngFor="let item of images, let i = index">
<ion-thumbnail tappable (click)="onViewImages(i)">
<img #image src="{{item?.originPath}}" class="auto-image" />
</ion-thumbnail>
</ion-col>
<ion-col col-3 align-self-center>
<ion-thumbnail *ngIf="images && images.length<max && canAdd" tappable (click)="onAddImage()">
<img #image src="assets/imgs/add.png" class="auto-image"/>
</ion-thumbnail>
</ion-col>
</ion-row>旧的ts这部分：
width: string;
@ViewChild('addImage') img: ElementRef;
ngAfterViewChecked(){
this.width = this.img.nativeElement.width + 'px';
}变为新的：
@ViewChildren('image') childCmps: QueryList<ElementRef>;
ngAfterViewChecked(){
if(this.childCmps && this.childCmps.length>0){
this.childCmps.forEach(item =>{
item.nativeElement.height = item.nativeElement.width;
})
}
}原理很简单，由原来依赖addImage，变为根据自身的宽度调整高度。当然这里我只是以实现为目的的，如想优化那烦请客官自行尝试再告知本人，谢。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018.05.04 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读