我对这个问题有另一个类似的问题,但情况不同。我需要在离子幻灯片中显示三个结果,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;