Question

我正在构建一个离子应用程序。我为应用程序'类别'创建了这个页面，它使用带有相应图像和标题的离子卡显示各种类别。图像是从外部源（CDN链接）获取的。每张卡导航到离子应用程序中的相应页面。

我实际上用重复的离子卡构建离子应用程序。但是当我构建应用程序并在我的Android手机上运行时。滚动时有滞后。

我研究了这个问题并且开始知道我可以使用离子收集重复而不是在category.html中使用多个离子卡代码，而收集重复可以使应用程序更快。

无论如何，我决定测试这个理论，因为集合重复似乎比编写更大的代码更正确，也可以使离子应用更快（不确定更快）。

所以，我尝试了解离子3收集重复。我试图实现这一点，但失败了。我尝试使用离子开发人员使用离子3收集重复用于带有打字稿的卡片的例子，但我认为没有。

我会在FYI下面发布类别页面代码。请更正我。

category.HTML：

<ion-header>
  <ion-navbar color="dark">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>AppName</ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="card-background-page">

  <ion-card collection-repeat="item in items" (click)="{{item.callfuntion}}" class="wallcard">
      <img  collection-repeat="item in items" class="homecardimage" [src]="item.url"/>
      <div collection-repeat="item in items" class="card-title">{{item.name}}</div>
    </ion-card>
 </ion-content>

category.TYPESCRIPT

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams,AlertController,LoadingController } from 'ionic-angular';
import { Network } from '@ionic-native/network';

@IonicPage()
@Component({
  selector: 'page-category',
  templateUrl: 'category.html',
})
export class CategoryPage {

  constructor(public navCtrl: NavController, public navParams: NavParams,private network: Network,public alertCtrl: AlertController,public loadingCtrl: LoadingController) 
  {}
  items = [
    { callfunction: 'func1()', name: 'Scruff McGruff' ,url:'Link1'},
    { callfunction: 'func2()', name: 'G.I. Joe',url:'Link2' },
    { callfunction: 'func3()', name: 'Miss Frizzle',url:'Link3' },
    { callfunction: 'func4()', name: 'Ash Ketchum',url:'Link4' }
  ];

  goPopular(){
    let loader = this.loadingCtrl.create({
        content: "Please wait...",
        duration: 10
      });
      loader.present();

      this.navCtrl.push('PopularPage');

     }
     goAbstract(){
      let loader = this.loadingCtrl.create({
          content: "Please wait...",
          duration: 10
        });
        loader.present();

        this.navCtrl.push('AbstractPage');

       }

     goFullscreen(){
      this.navCtrl.push('FullscreenPage');
     }   


  ionViewDidLoad() {
    console.log('ionViewDidLoad CategoryPage');
  }
}

如何在收集重复中包含离子卡（点击），图像src和卡片标题？上面的代码有什么问题，以及如何使用typescript和html的离子卡正确实现ionic3集合重复？

感谢。

收集重复离子3卡

0 个答案: