• <i id='HM35g'><tr id='HM35g'><dt id='HM35g'><q id='HM35g'><span id='HM35g'><b id='HM35g'><form id='HM35g'><ins id='HM35g'></ins><ul id='HM35g'></ul><sub id='HM35g'></sub></form><legend id='HM35g'></legend><bdo id='HM35g'><pre id='HM35g'><center id='HM35g'></center></pre></bdo></b><th id='HM35g'></th></span></q></dt></tr></i><div id='HM35g'><tfoot id='HM35g'></tfoot><dl id='HM35g'><fieldset id='HM35g'></fieldset></dl></div>
    <tfoot id='HM35g'></tfoot>
  • <small id='HM35g'></small><noframes id='HM35g'>

    1. <legend id='HM35g'><style id='HM35g'><dir id='HM35g'><q id='HM35g'></q></dir></style></legend>

        <bdo id='HM35g'></bdo><ul id='HM35g'></ul>

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

        时间:2023-09-09
      1. <i id='Ur7xs'><tr id='Ur7xs'><dt id='Ur7xs'><q id='Ur7xs'><span id='Ur7xs'><b id='Ur7xs'><form id='Ur7xs'><ins id='Ur7xs'></ins><ul id='Ur7xs'></ul><sub id='Ur7xs'></sub></form><legend id='Ur7xs'></legend><bdo id='Ur7xs'><pre id='Ur7xs'><center id='Ur7xs'></center></pre></bdo></b><th id='Ur7xs'></th></span></q></dt></tr></i><div id='Ur7xs'><tfoot id='Ur7xs'></tfoot><dl id='Ur7xs'><fieldset id='Ur7xs'></fieldset></dl></div>

          <legend id='Ur7xs'><style id='Ur7xs'><dir id='Ur7xs'><q id='Ur7xs'></q></dir></style></legend>

                <tbody id='Ur7xs'></tbody>
            • <small id='Ur7xs'></small><noframes id='Ur7xs'>

                <bdo id='Ur7xs'></bdo><ul id='Ur7xs'></ul>

                <tfoot id='Ur7xs'></tfoot>
                  本文介绍了如何在 ionic2 中为 Web 应用程序管理多个滑块?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

                  问题描述

                  我有这样的 html 用于幻灯片

                  它在移动设备中工作.问题是当我在 Firefox(也在 chrome 中)拖动幻灯片 2 时,幻灯片 1 也被拖动.不能单独拖动幻灯片 2.如何在浏览器中工作的 ionic 2 中制作 2 个完全独立的滑块

                  解决方案

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

                  1. 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:

                    1. link to the github issue
                    2. 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 应用程序管理多个滑块?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持html5模板网!

                  <legend id='9hCVq'><style id='9hCVq'><dir id='9hCVq'><q id='9hCVq'></q></dir></style></legend>
                    • <bdo id='9hCVq'></bdo><ul id='9hCVq'></ul>
                    • <small id='9hCVq'></small><noframes id='9hCVq'>

                        <tbody id='9hCVq'></tbody>
                    • <tfoot id='9hCVq'></tfoot>
                      <i id='9hCVq'><tr id='9hCVq'><dt id='9hCVq'><q id='9hCVq'><span id='9hCVq'><b id='9hCVq'><form id='9hCVq'><ins id='9hCVq'></ins><ul id='9hCVq'></ul><sub id='9hCVq'></sub></form><legend id='9hCVq'></legend><bdo id='9hCVq'><pre id='9hCVq'><center id='9hCVq'></center></pre></bdo></b><th id='9hCVq'></th></span></q></dt></tr></i><div id='9hCVq'><tfoot id='9hCVq'></tfoot><dl id='9hCVq'><fieldset id='9hCVq'></fieldset></dl></div>