离子2:将一些结果合并为一个项目进行离子滑动



我对这个问题有另一个类似的问题,但情况不同。我需要在离子幻灯片中显示三个结果,iDangero Swipper 实际上会解决我的问题,但我相信离子滑块也可以做这样的事情。请检查以下代码;

首页:

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> 

在本文档中,您可以将属性slidesPerView绑定到幻灯片

幻灯片每个视图 - 数量 - 每个视图的幻灯片数。幻灯片同时可见。 默认值:1。

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

在 .ts 文件中

spv = 3;

相关内容

  • 没有找到相关文章

最新更新