本文介紹了如何在 ionic2 中為 Web 應(yīng)用程序管理多個(gè)滑塊?的處理方法，對大家解決問題具有一定的參考價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧！
問題描述
我有這樣的 html 用于幻燈片
它在移動(dòng)設(shè)備中工作.問題是當(dāng)我在 Firefox(也在 chrome 中)拖動(dòng)幻燈片 2 時(shí)，幻燈片 1 也被拖動(dòng).不能單獨(dú)拖動(dòng)幻燈片 2.如何在瀏覽器中工作的 ionic 2 中制作 2 個(gè)完全獨(dú)立的滑塊
解決方案
更新感謝來自 Slack 頻道的@cookiecookson:
- t
首先你需要安裝它
npm install angular2-swiper --save然后將其導(dǎo)入到
app.module.ts文件中(或者你想要的模塊中)import { KSSwiperModule } from 'angular2-swiper';//...@NgModule({聲明:[...]，進(jìn)口:[KSSwiperModule，...]，引導(dǎo)程序:[...]，入口組件:[..]，供應(yīng)商:[...]})導(dǎo)出類 AppModule { }然后在你的頁面中使用它.
組件代碼:
從'@angular/core'導(dǎo)入{組件}；從離子角度"導(dǎo)入 { NavController }；@零件({選擇器:'page-home'，模板網(wǎng)址:'home.html'})導(dǎo)出類主頁 {public items_a: 數(shù)組<any>;public items_b: 數(shù)組<any>;公共選項(xiàng):任何；構(gòu)造函數(shù)(公共 navCtrl:NavController){這個(gè).items_a = [{游戲標(biāo)題:'Title1'，游戲圖像:'http://via.placeholder.com/200x200'}，{游戲標(biāo)題:'Title2'，游戲圖像:'http://via.placeholder.com/200x200'}，{游戲標(biāo)題:'Title3'，游戲圖像:'http://via.placeholder.com/200x200'}，{游戲標(biāo)題:'Title4'，游戲圖像:'http://via.placeholder.com/200x200'}，{游戲標(biāo)題:'Title5'，游戲圖像:'http://via.placeholder.com/200x200'}，{游戲標(biāo)題:'Title6'，游戲圖像:'http://via.placeholder.com/200x200'}，{游戲標(biāo)題:'Title7'，游戲圖像:'http://via.placeholder.com/200x200'}，{游戲標(biāo)題:'Title8'，游戲圖像:'http://via.placeholder.com/200x200'}，{游戲標(biāo)題:'Title9'，游戲圖像:'http://via.placeholder.com/200x200'}];this.items_b = [{游戲標(biāo)題:'Title10'，游戲圖像:'http://via.placeholder.com/200x200'}，{游戲標(biāo)題:'Title11'，游戲圖像:'http://via.placeholder.com/200x200'}，{游戲標(biāo)題:'Title12'，游戲圖像:'http://via.placeholder.com/200x200'}，{游戲標(biāo)題:'Title13'，游戲圖像:'http://via.placeholder.com/200x200'}，{游戲標(biāo)題:'Title14'，游戲圖像:'http://via.placeholder.com/200x200'}，{游戲標(biāo)題:'Title15'，游戲圖像:'http://via.placeholder.com/200x200'}，{游戲標(biāo)題:'Title16'，游戲圖像:'http://via.placeholder.com/200x200'}，{游戲標(biāo)題:'Title17'，游戲圖像:'http://via.placeholder.com/200x200'}，{游戲標(biāo)題:'Title18'，游戲圖像:'http://via.placeholder.com/200x200'}];this.options = {slidesPerView: 3}}}查看:
<ion-header><離子導(dǎo)航欄><離子標(biāo)題>多張幻燈片</離子標(biāo)題></離子導(dǎo)航欄></離子頭><離子含量填充><ks-swiper-container [options]="options"><ks-swiper-slide *ngFor="讓items_a滑動(dòng)"><ion-card class="list-card"><div class="cardInnerWrap"><離子項(xiàng)目>{{ slide.gameTitle }}</離子項(xiàng)目><img src="{{ slide.gameImage }}"></div></離子卡></ks-swiper-slide></ks-swiper-container><ks-swiper-container [options]="options"><ks-swiper-slide *ngFor="讓items_b滑動(dòng)"><ion-card class="list-card"><div class="cardInnerWrap"><離子項(xiàng)目>{{ slide.gameTitle }}</離子項(xiàng)目><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 --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>這篇關(guān)于如何在 ionic2 中為 Web 應(yīng)用程序管理多個(gè)滑塊?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！
【網(wǎng)站聲明】本站部分內(nèi)容來源于互聯(lián)網(wǎng),旨在幫助大家更快的解決問題，如果有圖片或者內(nèi)容侵犯了您的權(quán)益，請聯(lián)系我們刪除處理，感謝您的支持！