Question

我有一个Ionic 3应用程序，它有一个我想要虚拟的列表。列表项通过媒体查询调整宽度，以便它们是手机，平板电脑以及纵向或横向所需的宽度。例如，在普通平板电脑上，每行有2个纵向，但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'>              
              <img width="40" height="40" [src]='item.image'/>
            </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 plunk找到一个示例，但在插件中，媒体查询似乎不起作用。我在浏览器here中播放了一段视频，以显示我的意思。

有没有人有任何想法我还需要做什么，所以我可以使用带有响应项目的虚拟列表？

提前感谢您的帮助！

具有自适应列表项的离子虚拟滚动

0 个答案: