如何在 ionic2 中为 Web 应用程序管理多个滑块?
我有这样的 html 用于幻灯片
它在移动设备中工作.问题是当我在 Firefox(也在 chrome 中)拖动幻灯片 2 时,幻灯片 1 也被拖动.不能单独拖动幻灯片 2.如何在浏览器中工作的 ionic 2 中制作 2 个完全独立的滑块
解决方案更新感谢来自 Slack 频道的@cookiecookson:
- t
首先你需要安装它
npm install angular2-swiper --save
然后将其导入到
app.module.ts
文件中(或者你想要的模块中)import { KSSwiperModule } from 'angular2-swiper';//...@NgModule({声明:[...],进口:[KSSwiperModule,...],引导程序:[...],入口组件:[..],供应商:[...]})导出类 AppModule { }
然后在你的页面中使用它.
组件代码:
从'@angular/core'导入{组件};从离子角度"导入 { NavController };@零件({选择器:'page-home',模板网址:'home.html'})导出类主页 {public items_a: 数组<any>;public items_b: 数组<any>;公共选项:任何;构造函数(公共 navCtrl:NavController){这个.items_a = [{游戏标题:'Title1',游戏图像:'http://via.placeholder.com/200x200'},{游戏标题:'Title2',游戏图像:'http://via.placeholder.com/200x200'},{游戏标题:'Title3',游戏图像:'http://via.placeholder.com/200x200'},{游戏标题:'Title4',游戏图像:'http://via.placeholder.com/200x200'},{游戏标题:'Title5',游戏图像:'http://via.placeholder.com/200x200'},{游戏标题:'Title6',游戏图像:'http://via.placeholder.com/200x200'},{游戏标题:'Title7',游戏图像:'http://via.placeholder.com/200x200'},{游戏标题:'Title8',游戏图像:'http://via.placeholder.com/200x200'},{游戏标题:'Title9',游戏图像:'http://via.placeholder.com/200x200'}];this.items_b = [{游戏标题:'Title10',游戏图像:'http://via.placeholder.com/200x200'},{游戏标题:'Title11',游戏图像:'http://via.placeholder.com/200x200'},{游戏标题:'Title12',游戏图像:'http://via.placeholder.com/200x200'},{游戏标题:'Title13',游戏图像:'http://via.placeholder.com/200x200'},{游戏标题:'Title14',游戏图像:'http://via.placeholder.com/200x200'},{游戏标题:'Title15',游戏图像:'http://via.placeholder.com/200x200'},{游戏标题:'Title16',游戏图像:'http://via.placeholder.com/200x200'},{游戏标题:'Title17',游戏图像:'http://via.placeholder.com/200x200'},{游戏标题:'Title18',游戏图像:'http://via.placeholder.com/200x200'}];this.options = {slidesPerView: 3}}}
查看:
<ion-header><离子导航栏><离子标题>多张幻灯片</离子标题></离子导航栏></离子头><离子含量填充><ks-swiper-container [options]="options"><ks-swiper-slide *ngFor="让items_a滑动"><ion-card class="list-card"><div class="cardInnerWrap"><离子项目>{{ slide.gameTitle }}</离子项目><img src="{{ slide.gameImage }}"></div></离子卡></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"><离子项目>{{ slide.gameTitle }}</离子项目><img src="{{ slide.gameImage }}"></div></离子卡></ks-swiper-slide></ks-swiper-container></离子含量>
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:
- link to the github issue
- link to a PR that fixes this issue (not yet merged as of 27/06/2017)
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 --save
Then import it in the
app.module.ts
file (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>
相关文章