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

时间：2023-03-16

本文介绍了如何在 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>


                        
这篇关于如何在 ionic2 中为 Web 应用程序管理多个滑块?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！



上一篇：如何在 Ionic 中的选项卡之间传递数据 
下一篇：单击 InfoWindow Typescript Angular2 

 
相关文章

     
    
Javascript 将 URL 转换为 BASE64 图像
使用模式 Angular 2 进行输入验证
ionic - 如何在 ion-header 中对长字符串进行自动换行
将 angularjs 服务注入 Angular
ionic 2 + angular 2:自动滚动到列表/页面/聊天的底部
在 ionic 2 应用程序中打开 PDF 文件
如何更新 ionic 2 侧菜单中的值
如何在角度2中动态更改css类名
使用模态和样式的 Ionic 2 登录弹出窗口
将 gregorian 日期转换为 angular 2 和 Ionic 2 中的波斯(jalali)日期