Question

我有this issue的另一个类似问题，但情况不同。我需要在离子滑动显示三个结果，iDangero Swipper实际上将解决我的问题，但我相信离子滑动也可以做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

<{3>}中的

，您可以将属性slidesPerView绑定到幻灯片

slidesPerView - number - 每个视图的幻灯片。幻灯片同时可见。默认值：1。

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

<。>在.ts文件中

spv = 3;

离子2：将一些结果加入到离子滑动的一个项目中

1 个答案: