【问题标题】:Ionic slides move from first slide to last with loop true does not update pager离子幻灯片从第一张幻灯片移动到最后一张,循环真实不更新寻呼机
【发布时间】:2017-11-26 22:39:04
【问题描述】:

当我使用带有寻呼机和循环的离子幻灯片时。当我从第一张幻灯片向左滑动时,最后一张幻灯片打开,但寻呼机点未更新,视图未绑定到模型。如果用户与之交互,那么它可以正常工作,但最初寻呼机和视图没有更新。

My html looks like this- 

    <ion-content padding>
    <div class="dummyContent">Refer to your friend and earn bonus</div>
    <ion-slides pager [loop]="true" [speed]="600">
        <ion-slide>
            <h1>{{data.team1.name}}</h1>
            <h1>{{data.team1.team}}</h1>
            <h1>{{data.team1.group}}</h1>
        </ion-slide>
        <ion-slide>
            <h1>{{data.team2.name}}</h1>
            <h1>{{data.team2.team}}</h1>
            <h1>{{data.team2.group}}</h1>
        </ion-slide>
        <ion-slide>
            <h1>{{data.team3.name}}</h1>
            <h1>{{data.team3.team}}</h1>
            <h1>{{data.team3.group}}</h1>
        </ion-slide>
    </ion-slides>
</ion-content>

and my ts file looks like this-

    import { Component, ViewChild } from '@angular/core';
    import { NavController,Slides } from 'ionic-angular';

    @Component({
    selector: 'try',
    templateUrl: 'try.html'
    })

    export class try {
    @ViewChild(Slides) slides: Slides;
    data = {
    team1: {
    name: 'mridul',
    team: 'provo',
    group: 'eagle'
    },
    team2: {
    name: 'aditya',
    team: 'toapaz',
    group: 'eagle1'
    },
    team3: {
    name: 'rajneesh',
    team: 'infinite',
    group: 'eagle2'
    }
    }

    constructor() { }
    }

【问题讨论】:

    标签: angular ionic2 ion-slides


    【解决方案1】:
     slideOptsOne = {
        initialSlide: 0,
        slidesPerView: 1,
        autoplay: {
          disableOnInteraction: false,
          loop :true,
        },
      };
    

    这是新的配置,就像魅力一样 :) 快乐编码

    【讨论】:

      【解决方案2】:

      我遇到了同样的问题,这是我找到的解决方案: 当您想要更新幻灯片时,您需要使用slider.updateLoop();。 我在里面使用它们

         onSlideChangeEnd: function (slider) {
                      $scope.slider.updateLoop();
                  },
      

      请注意,您需要 ionic1 的最新版本:this one 工作正常。

      【讨论】:

        猜你喜欢
        • 2017-11-02
        • 1970-01-01
        • 2018-08-17
        • 2021-01-17
        • 2013-08-24
        • 1970-01-01
        • 1970-01-01
        • 2013-04-29
        • 2012-12-24
        相关资源
        最近更新 更多