如何在 ionic2 中为 Web 应用程序管理多个滑块？

Question

我有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。我如何在 ionic 2 中制作 2 个完全独立的滑块并在浏览器中工作

Answer 1

更新感谢来自 Slack 频道的@cookiecookson：

这似乎是 Ionic 的 Swiper 包装器实现中的一个错误。解决它的一种方法是为 Swiper 库使用另一个包装器，就像 this one. You can find a demo app in this github repo.

最终结果将是这样的：

t

首先你需要安装它

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', gameImage: 'http://via.placeholder.com/200x200' },
      { gameTitle: 'Title3', gameImage: 'http://via.placeholder.com/200x200' },
      { gameTitle: 'Title4', gameImage: 'http://via.placeholder.com/200x200' },
      { gameTitle: 'Title5', gameImage: 'http://via.placeholder.com/200x200' },
      { gameTitle: 'Title6', gameImage: 'http://via.placeholder.com/200x200' },
      { gameTitle: 'Title7', gameImage: 'http://via.placeholder.com/200x200' },
      { gameTitle: 'Title8', gameImage: 'http://via.placeholder.com/200x200' },
      { gameTitle: 'Title9', gameImage: 'http://via.placeholder.com/200x200' }
    ];

    this.items_b = [
      { gameTitle: 'Title10', gameImage: 'http://via.placeholder.com/200x200' },
      { gameTitle: 'Title11', gameImage: 'http://via.placeholder.com/200x200' },
      { gameTitle: 'Title12', gameImage: 'http://via.placeholder.com/200x200' },
      { gameTitle: 'Title13', gameImage: 'http://via.placeholder.com/200x200' },
      { gameTitle: 'Title14', gameImage: 'http://via.placeholder.com/200x200' },
      { gameTitle: 'Title15', gameImage: 'http://via.placeholder.com/200x200' },
      { gameTitle: 'Title16', gameImage: 'http://via.placeholder.com/200x200' },
      { gameTitle: 'Title17', gameImage: 'http://via.placeholder.com/200x200' },
      { 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>

Answer 2

我找到了可行的解决方案 here

HTML:

<ion-header no-border>
  <ion-navbar transparent>
    <ion-title>Custom Pagination</ion-title>
  </ion-navbar>
</ion-header>
<ion-content text-center>
  <h3>Pagination numbers</h3>
  <ion-slides #sliderOne pager (ionDidChange)="onSlideChanged()">
    <ion-slide *ngFor="let slide of slides"
               [ngStyle]="{'background' : 'url(' + slide.imageUrl + ')'}">
      <h2>{{slide.title}}</h2>
    </ion-slide>
  </ion-slides>


  <h3>Pagination numbers 2</h3>
  <ion-slides #sliderTwo pager (ionDidChange)="onSlideChanged()">
    <ion-slide *ngFor="let slide of slides"
               [ngStyle]="{'background' : 'url(' + slide.imageUrl + ')'}">
      <h2>{{slide.title}}</h2>
    </ion-slide>
  </ion-slides>


  <h3>Pagination icons</h3>
  <ion-slides #sliderThree pager (ionDidChange)="onSlideChanged()">
    <ion-slide *ngFor="let slide of slides"
               [ngStyle]="{'background' : 'url(' + slide.imageUrl + ')'}">
      <h2>{{slide.title}}</h2>
    </ion-slide>
  </ion-slides>
</ion-content>

TS:

import { Component, ViewChild } from '@angular/core';
import { NavController, Slides, IonicPage } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-slide-custom-pagination',
  templateUrl: 'slide-custom-pagination.html'
})
export class SlideCustomPaginationPage {
  @ViewChild('sliderOne') sliderOne: Slides;
  @ViewChild('sliderTwo') sliderTwo: Slides;
  @ViewChild('sliderThree') sliderThree: Slides;

  slides = [
    {
      title: 'Dream\'s Adventure',
      imageUrl: 'assets/img/lists/wishlist-1.jpg',
      songs: 2,
      private: false
    },
    {
      title: 'For the Weekend',
      imageUrl: 'assets/img/lists/wishlist-2.jpg',
      songs: 4,
      private: false
    },
    {
      title: 'Family Time',
      imageUrl: 'assets/img/lists/wishlist-3.jpg',
      songs: 5,
      private: true
    },
    {
      title: 'My Trip',
      imageUrl: 'assets/img/lists/wishlist-4.jpg',
      songs: 12,
      private: true
    }
  ];

  constructor(public navCtrl: NavController) { }

  ngAfterViewInit() {
    this.sliderOne.paginationBulletRender = (index, className) => {
      return `<span class="custom-pagination ${className}>${index + 1}</\span>`;
    };

    this.sliderTwo.paginationBulletRender = (index, className) => {
      return `<span class="custom-pagination-2 ${className}>${index + 1}</\span>`;
    };

    this.sliderThree.paginationBulletRender = (index, className) => {
      return `<span class="custom-pagination-3 bullet-icon-${index + 1} ${className}></\span>`;
    };
  }
}

如何在 ionic2 中为 Web 应用程序管理多个滑块？

How can manage multiple slider in ionic2 for web application?

javascript

typescript

ionic2

ionic3

angular