Ionic 2：将一些结果加入到一个项目中以进行离子滑动

Question

我也有另一个与 , but different case. I need to display three results in ion-slide, iDangero Swipper actually will solved my problem but I belive ion-slide could do something like this 类似的问题。请检查以下代码；

home.ts:

books: Array<any>;

getBookDB(event, key) {
            this._httpService.getBook().subscribe(
                data => {
                    this.books = data = data.results;
                    console.log(data);
                },
                err => {
                    console.log(err);
                }
            );
}

itemTapped(event, book){
    this.navCtrl.push(DetailPage, {
      book: book
    });
}

服务提供商：

apikey: string = "XXX";

  getBook() {
    var url = 'http://localhost:9000/findAll/BookApis/' + this.apikey;
    var response = this._http.get(url).map(res => res.json());
    return response;
  }

和我的离子幻灯片：

<ion-slides>
  <ion-slide *ngFor="let book of books; let i = index" (click)="itemTapped($event, book)">
    <ion-thumbnail item-left>
    <img src="{{book.imgUrl}}">
    </ion-thumbnail>
    <h2>{{book.title}}</h2>
    <h3>{{book.author}}</h3>
    <p>{{book.category}}</p>
    <button ion-button clear item-right>View</button>
  </ion-slide>
</ion-slides>

Answer 1

在 this document 中，您可以将属性 slidesPerView 绑定到您的幻灯片

slidesPerView - number - Slides per view. Slides visible at the same time. Default: 1.

<ion-slides [slidesPerView]="spv">
  // slide
</ion-slides>

在 .ts 文件中

spv = 3;

Ionic 2：将一些结果加入到一个项目中以进行离子滑动

Ionic 2: join some results into one item for ion-slide

join

slice

typescript

ionic2

angular