如何在ionic2中管理web2应用程序中的多个滑块？ [英] How can manage multiple slider in ionic2 for web application?
本文介绍了如何在ionic2中管理web2应用程序中的多个滑块？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
幻灯片我有这样的HTML
< ion-slides [pager] =falseslidesPerView =6 ＃slider_a>
< ion-slide * ngFor =让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] =falseslidesPerView =6＃slider_b>
< ion-slide * ngFor =让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：
- t
首先你需要安装它
npm install angular2- swiper --save
然后将其导入
app.module.ts文件（或在你想要的模块中）从'angular2-swiper'导入{KSSwiperModule};
// ... ...
@NgModule（{
声明：[...]，
进口：[KSSwiperModule，...] ，
bootstrap：[...]，
entryComponents：[..]，
provider：[...]
}）
export class AppModule {}
然后只需在页面中使用它。
组件代码：
从'@ angular / core'导入{Component};来自'ionic-angular'的
import {NavController};
@Component（{
selector：'page-home'，
templateUrl：'home.html'
}）
export class HomePage {
public items_a：Array< any> ;;
public items_b：Array< any> ;;
公共选项：任何;
构造函数（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>
多个幻灯片
< / ion-title>
< / ion-navbar>
< / ion-header>
< ion-content padding>
< ks-swiper-container [options] =options>
< ks-swiper-slide * ngFor =让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 =让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>
I have html like this for slides
<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>its working in mobile device. problem is when i drag slide 2 in Firefox(also in chrome) , slide 1 also getting dragged. cant drag slide 2 alone. How can i make 2 completely independent slider in ionic 2 that work in browser
解决方案Update Thanks to @cookiecookson from Slack channel:
Seems like it's a bug in Ionic's implementation of the Swiper wrapper. One way to solve it would be to use another wrapper for the Swiper library, just like this one. You can find a demo app in this github repo.
The end result will be something like this:
t
First you'd need to install it
npm install angular2-swiper --saveThen import it in the
app.module.tsfile (or in the module you want)import { KSSwiperModule } from 'angular2-swiper'; // ... @NgModule({ declarations: [...], imports: [KSSwiperModule, ...], bootstrap: [...], entryComponents: [..], providers: [...] }) export class AppModule { }And then just use it in your page.
Component code:
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 } } }View:
<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>这篇关于如何在ionic2中管理web2应用程序中的多个滑块？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
