虚拟滚动离子img标签与另一个离子卡重叠 [英] Virtual scroll ion-img tag overlapping to another ion card

问题描述

我在虚拟滚动中使用 ion-img 时遇到问题，当我不打算设置 ion-img <的宽度和高度时/ code>标记它显示一个小图像。但当我在它上面设置一些宽度和高度时，它会重叠到另一张不正确的卡上

/ p>

下面是我正在使用的代码

 < ion- list [virtualScroll] =posts[approxItemHeight] ='150px'> 
< div * virtualItem =let poststyle =width：100％> 
< ion-card class =adv-map> 
< ion-item> 
< ion-avatar item-start> 
< img src =img / marty-avatar.png> 
< / ion-avatar> 
< / button> - > 
< h2> {{post.name}}< / h2> 
< p> {{post.date_posted}}< / p> 
< / ion-item> 
 
< ion-img [width] =imgWidth[height] =imgHeight[src] =post.imagepost_url>< / ion-img> 
< ion-fab right top class =fab-map> 
< button（click）=showLocation（post.lattitude，post.longitude，post.title）ion-fab> 
< ion-icon name =pin>< / ion-icon> 
< / button> 
< / ion-fab> 
 
< ion-card-content> 
< ion-card-title> 
 {{post.title}} 
< / ion-card-title> 
< p> 
 {{post.content}} 
< / p> 
< / ion-card-content> 
< / ion-card> 
< div style =height：100px>< / div> 
< / div> 
< / ion-list> 
  

编辑：我忘了提到这是错误，仍然在解决但我要求另一个解决这个问题的过程我不擅长做css

解决方案

您必须通过卡页脚缩小图像的高度。类似于：

  img.height  -  = card.footerHeight 
  

I have a problem using ion-img in virtual scroll, when im not going to set the width and height of the ion-img tag it shows a tiny image. But when I set some width and height on it it overlaps to another card which is not right

below is the code that i am using

<ion-list [virtualScroll]="posts" [approxItemHeight]="'150px'">
    <div *virtualItem="let post" style="width: 100%">
      <ion-card class="adv-map">
        <ion-item>
          <ion-avatar item-start>
            <img src="img/marty-avatar.png">
          </ion-avatar>
          </button> -->
          <h2>{{ post.name }} </h2>
          <p>{{ post.date_posted }}</p>
        </ion-item>

          <ion-img [width]="imgWidth" [height]="imgHeight" [src]="post.imagepost_url"></ion-img>
          <ion-fab right top class="fab-map">
            <button (click)="showLocation(post.lattitude,post.longitude,post.title)" ion-fab>
              <ion-icon name="pin"></ion-icon>
            </button>
          </ion-fab>

        <ion-card-content>
          <ion-card-title>
            {{post.title}}
          </ion-card-title>
          <p>
            {{post.content}}
          </p>
        </ion-card-content>
      </ion-card>
          <div style="height:100px"></div>
    </div>
  </ion-list>

EDIT: I forgot to mention that this was bug and still on the process in solving but im asking another work around to fix this problem im not good at doing css

解决方案

You have to reduce the height of the image by the card footer. Something like:

img.height -= card.footerHeight

这篇关于虚拟滚动离子img标签与另一个离子卡重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！