Question

我正在使用虚拟滚动来输出大量的卡片。这是我的代码：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { TowersModel } from '../../app/models/towers-model';
import { TowerPage } from '../tower/tower';

@Component({
  selector: 'page-towers',
  templateUrl: 'towers.html'
})
export class TowersPage {

      towers: any;

    constructor(public navCtrl: NavController){ 

      this.towers = [];
      for(let i = 1; i < 2000; i++){
        this.towers.push({
          "name" : "Tower "+i,
          "image" : "http://st.motortrend.com/uploads/sites/10/2015/09/2013-Ferrari-458-Italia-Front-Three-Quarters-View.jpg"
        });
      }
    }

    viewTower(){
      this.navCtrl.push(TowerPage);
    }
}

模板：

<ion-header>
    <ion-navbar>
        <ion-title>Towers</ion-title>
    </ion-navbar>
</ion-header>

<ion-content>
    <ion-content>

        <ion-list [virtualScroll]="towers">

          <div *virtualItem="let tower">
            <ion-card>
              <ion-img [src]="tower.image" [width]="2048" [height]="1360"></ion-img>
              <ion-card-content>
                <ion-card-title>{{tower.name}}</ion-card-title>
                <p>Lorem ipsu sum dolor amor sit amet</p>
              </ion-card-content>
            </ion-card>
            </div>

        </ion-list>

    </ion-content>
</ion-content>

除了标准离子框架之外，我没有将外部css应用于此页面。

如果我使用常规的img标签而不是ion-img，那么图像会自动缩小以完全适合卡的宽度，同时保持相同的宽高比。当我使用ion-img时，虽然图像没有缩小以适应卡内部并且以原始尺寸渲染，因此它很大并且无法正确显示。如何让它很好地适应卡片？

Answer 1

离子提供者只有一小部分helpers。默认情况下，使用3标签时，离子会根据图像比率及其包装组件对图像应用边距。

因此，如果我没有记错，您可以将ion-img或no-margin添加到图片代码中，以删除默认添加的间距

no-padding

当使用带有virtualScroll的ion-img时，Ionic 2卡片图像不会调整大小以适应卡内部

1 个答案: