ionic virtualscroll仅显示前5项

时间:2017-09-18 18:26:55

标签: angular ionic-framework ionic3

我不确定这是Ionic中的错误,还是我做错了什么。我正在尝试将virtualscrollion-img一起使用,以生成包含100个图片链接的数组。

代码

posts: Array<any> = [];
  constructor(public navCtrl: NavController, public navParams: NavParams, private http: Http) {
    for (let i = 0; i < 100; i++)
      this.posts.push('https://unsplash.it/200/150?image=' + i);
  }

HTML

<ion-content>

  <ion-list [virtualScroll]="posts" approxItemHeight="150px" bufferRatio="1">

    <ion-item *virtualItem="let post;">
      <ion-card>
        <div style="width:100%;height:150px">
          <ion-img width="100%" height="150px" cache="true" [src]="post"></ion-img>
        </div>
        <ion-card-content>
          <ion-card-title>
            Nine Inch Nails Live
          </ion-card-title>
          <p>
            The most popular industrial group ever, and largely responsible for bringing the music to a mass audience.
          </p>
        </ion-card-content>
      </ion-card>
    </ion-item>

  </ion-list>

</ion-content>

它只显示/呈现前5个帖子。是否缺少某些东西,或者我做错了什么?

已编辑:a live demo can be found here

0 个答案:

没有答案