幻灯片我有这样的
HTML
<ion-slides [pager]="false" slidesPerView="6" #slider_a>
<ion-slide *ngFor="let slide of items_a " #ddd>
<ion-card class="list-card" >
<div class="cardInnerWrap">
<ion-item>
{{slide.gameTitle}}
</ion-item>
<img src="{{slide.gameImage}}">
</div>
</ion-card>
</ion-slide>
</ion-slides>
<ion-slides [pager]="false" slidesPerView="6" #slider_b>
<ion-slide *ngFor="let slide of items_b " #ddd>
<ion-card class="list-card" >
<div class="cardInnerWrap">
<ion-item>
{{slide.gameTitle}}
</ion-item>
<img src="{{slide.gameImage}}">
</div>
</ion-card>
</ion-slide>
</ion-slides>
它在移动设备上工作.问题是当我在Firefox中拖动幻灯片2时(也在Chrome中),幻灯片1也被拖动了.不能单独拖动幻灯片2.如何在离子2中制作2个完全独立的滑块,可在浏览器中使用
解决方法
更新
感谢来自Slack频道的@cookiecookson：
感谢来自Slack频道的@cookiecookson：
> link to the github issue
> link to a PR that fixes this issue (not yet merged as of 27/06/2017)
似乎这是Ionic实施Swiper包装器时的一个错误.解决这个问题的一种方法是使用另一个Swiper库包装器,就像this one一样.您可以在this github repo找到一个演示应用程序.
最终结果将是这样的：
首先,您需要安装它
npm install angular2-swiper --save
然后将其导入app.module.ts文件(或您想要的模块中)
import { KSSwiperModule } from 'angular2-swiper';
// ...
@NgModule({
declarations: [...],imports: [KSSwiperModule,...],bootstrap: [...],entryComponents: [..],providers: [...]
})
export class AppModule { }
然后只需在您的页面中使用它.
组件代码：
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
selector: 'page-home',templateUrl: 'home.html'
})
export class HomePage {
public items_a: Array<any>;
public items_b: Array<any>;
public options: any;
constructor(public navCtrl: NavController) {
this.items_a = [
{ gameTitle: 'Title1',gameImage: 'http://via.placeholder.com/200x200' },{ gameTitle: 'Title2',{ gameTitle: 'Title3',{ gameTitle: 'Title4',{ gameTitle: 'Title5',{ gameTitle: 'Title6',{ gameTitle: 'Title7',{ gameTitle: 'Title8',{ gameTitle: 'Title9',gameImage: 'http://via.placeholder.com/200x200' }
];
this.items_b = [
{ gameTitle: 'Title10',{ gameTitle: 'Title11',{ gameTitle: 'Title12',{ gameTitle: 'Title13',{ gameTitle: 'Title14',{ gameTitle: 'Title15',{ gameTitle: 'Title16',{ gameTitle: 'Title17',{ gameTitle: 'Title18',gameImage: 'http://via.placeholder.com/200x200' }
];
this.options = {
slidesPerView: 3
}
}
}
视图：
<ion-header>
<ion-navbar>
<ion-title>
Multiple slides
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ks-swiper-container [options]="options">
<ks-swiper-slide *ngFor="let slide of items_a">
<ion-card class="list-card">
<div class="cardInnerWrap">
<ion-item>
{{ slide.gameTitle }}
</ion-item>
<img src="{{ slide.gameImage }}">
</div>
</ion-card>
</ks-swiper-slide>
</ks-swiper-container>
<ks-swiper-container [options]="options">
<ks-swiper-slide *ngFor="let slide of items_b">
<ion-card class="list-card">
<div class="cardInnerWrap">
<ion-item>
{{ slide.gameTitle }}
</ion-item>
<img src="{{ slide.gameImage }}">
</div>
</ion-card>
</ks-swiper-slide>
</ks-swiper-container>
</ion-content>
