与另一个离子卡重叠的虚拟滚动 ion-img 标签

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

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