【组件篇】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,变为根据自身的宽度调整高度。当然这里我只是以实现为目的的,如想优化那烦请客官自行尝试再告知本人,谢。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏林德熙的博客

win10 uwp 让焦点在点击在页面空白处时回到textbox中

在网上 有一个大神问我这样的问题:在做UWP的项目,怎么能让焦点在点击在页面空白处时回到textbox中? 虽然我的小伙伴认为他这是一个 xy 问题,但是我还是...

1061
来自专栏QQ音乐技术团队的专栏

web实时长图实践

本文将介绍几种浏览器端和服务器端 web 实时生成图片的方案,欲知详情请看文章详情。

1.3K8
来自专栏hotqin888的专栏

golang-fullcalendar,engineercms完善日历事件-支持拖曳drop,改变时间resize

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/det...

2002
来自专栏陈满iOS

[iOS学习笔记]·第三方网络图片处理框架:SDWebImage(官方文档翻译篇)

该库提供了具有缓存支持的异步图像下载器。为方便起见,我们为UI元素例如UIImageView,UIButton,MKAnnotationView等类添加了cat...

3592
来自专栏c#开发者

datagrid资料+ by iCeSnaker - Program rhapsody

datagrid资料+ by iCeSnaker - Program rhapsody 关于datagrid的打印 http://www.chinaaspx.c...

3649
来自专栏花叔的专栏

教你做个手绘板小程序码

话说上一条群发,我发了一个旅行青蛙相关的图,底部有个手绘的小程序码 ? 有些细心的同学惊奇第发现那个“”手绘“”的小程序码竟然是可以长按识别的,觉得特别神奇。 ...

2994
来自专栏我的小碗汤

极致简洁的markdown编辑神器

Markdown 其实向来是文字爱好者和码农们的小众需求,市面上也涌现出了形形色色的 Markdown 编辑器,Mou、Typed、Ulysess、Macdow...

2585
来自专栏一“技”之长

iOS开发UI之日期控件的使用(UIDatePicker)

@property (nonatomic) UIDatePickerMode datePickerMode; 

982
来自专栏向治洪

android图片加载库Glide

什么是Glide? Glide是一个加载图片的库,作者是bumptech,它是在泰国举行的google 开发者论坛上google为我们介绍的,这个库被广泛的...

4146
来自专栏菩提树下的杨过

jQuery无缝图片横向(水平)/竖向(垂直)滚动

jQuery的一个不错的小插件,记性越来越差了,整理一下贴在这里,方便以后Copy & Paste <!DOCTYPE html PUBLIC "-//W3C/...

54210

扫码关注云+社区

领取腾讯云代金券