javascript – 如何管理ionic2中的多个滑块用于Web应用程序？

幻灯片我有这样的 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：

> 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>