Question

我有一个Ionic 3应用程序，其中我有一个项目列表，其中每个项目包含一个图像（一些可能具有相同的图像，一些其他图像）。

列表项可以根据屏幕宽度改变宽度，我通过媒体查询来做，例如......

@media screen and (min-width: 300px) {
  .mm-card-outter {
      width: 100%;
  }
}
@media screen and (min-width: 500px) {
  .mm-card-outter {
      width: 50%;
  }
 }
  @media screen and (min-width: 1000px) {
     .mm-card-outter {
        width: 33%;
  }    
}

我希望将宽度设为虚拟（因为大量的项目使它变得有点笨重），所以我按如下方式设置了虚拟列表..

<ion-content>

  <ion-list style='background-color: pink' [virtualScroll]="filteredData">    
    <ion-item *virtualItem="let item" class='mm-card-outter' approxItemHeight='77px'>      
      <div class='mm-card-inner'> 
        <ion-grid>
          <ion-row>
            <ion-col class='bar-col' [style.background-color]='item.colour'></ion-col>
            <ion-col class='card-icon-col'>              
              <ion-img width="40" height="40" [src]='item.image'></ion-img>
            </ion-col>
            <ion-col class='mm-card-main-data-col'>
              <div><b>{{item.item1.description}}</b></div>
              <div >{{item.item2.description}}</div>              
            </ion-col>
          </ion-row>
        </ion-grid>
        </div>
      </ion-item>          
</ion-list >    

</ion-content>

完整的例子可以在this plunkr看到。样式，包括我在index.html中添加的媒体查询

我有几个问题，但第一个是ion-img中的图像并不总是出现，并且可以在滚动时显示和消失。如果我只使用标准img就可以，但是根据doco，我们希望使用ion-img，因为它是为虚拟化而设计的。

在我的应用程序中，这是随应用程序安装的本地图像，但在这里我刚刚使用了在线图像，因此我可以在plunkr中显示它（本地和在线图像都有相同的问题）

有没有人知道这个例子中图像显示有什么问题？

提前感谢任何建议。

虚拟列表中的离子IonImg不会始终显示

0 个答案: