問題描述
我在虛擬滾動中使用 ion-img 時遇到問題，當我不打算設置 ion-img 標簽的寬度和高度時，它會顯示一個小圖像.但是當我在上面設置一些寬度和高度時，它會重疊到另一張不正確的卡片上
下面是我正在使用的代碼
<塊引用>
我忘了提到這是一個錯誤，仍在解決過程中，但我要求另一種解決方法來解決這個問題，我不擅長做 css
你必須通過卡片頁腳來降低圖像的高度.比如:
img.height -= card.footerHeightI 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
這篇關于與另一個離子卡重疊的虛擬滾動 ion-img 標簽的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！