Ion-slides not working with ion-segment after update on ionic5

@William_Wallace wrote:

Hey there,
I try to stay as short as I can and hope somebody can help me. I am happy about any help that I can get, because I am running out of ideas now.

It is a bit more complex, but I try to stay focused:

• ion-segment-button
• ion-slides in the templates
• ion tabs combined with ion side menu as Navigation concept for the app

So far so good.

I control my sliders with the ion-segment-buttons and wit worked like a charm

Since the update on Ionic 5 that is past. I am running into some really strange things, that makes me believes I am in some kind of “Stranger Things”-Episode maybe. Just kidding, it is really strange. But let’s stay focus.

The problem is as follows:

• I can change my ion-slides with the ion-segment-buttons only in the first view that gets loaded (ionic serve, also on devices)

On the first view everything is fine. When I change the view via tabbed menu, it is over. I am not able to change the slides. The view is updating, also the indicator on the segment buttons. But the slides does not work anymore. When I start from the second view as “init”-View all works good. There I describe this as a strange error.

Not the getActiveIndex, not the slideTo method. Just really strange. But it still shows me the slider and no error for sure.

Also the (ionSlideDidLoad) event is triggereing more than just one on the second view (saw it via console.log) but my DOM looks ok I guess.

• I was thinking it is something with the DOM or Platform-Ready, but any try in that way did not solve anything. - Also thought it could be something on the breaking changes for ionic5. But did not found something
• Then I also made sure that the sidemenu and tab-menu has nothing to do with it. Test it with Side and tab. both same (so routing should be fine too i guess)
• Also tried the (ionChange)=“segmentChange($event)” on the ionSegment, but same error in the not init view… getActiveIndex or SlideTo is doing just nothing.

Ok, so far so good. my template looks short like this one here:

And also important, I call data from an external API that got rendered inside the slides.

Thank you in advance for any help! I have really no more idea and just hoping I have something really stupid not seen here.

<ion-header>
    <ion-toolbar mode="ios">
        <ion-buttons slot="start">
            <ion-back-button text=""></ion-back-button>
        </ion-buttons>
        <ion-buttons slot="end">
            <ion-menu-button></ion-menu-button>
        </ion-buttons>
        <ion-title>Logo</ion-title>
    </ion-toolbar>
    <div class="ion-segment-background">
        <ion-segment  mode="md" class="SwipedTabs-tabs sr-slider-scroll" [(ngModel)]="tabIndex">
            <ion-segment-button *ngFor='let tab of tabs ; let i = index ' (click)="selectTab(slide, i)" value="{{i}}" >
                {{tab}}
            </ion-segment-button>
        </ion-segment>
    </div>

</ion-header>

<ion-content>

<ion-slides *ngIf="ready" #SwipedTabsSliderNews
              (ionSlidesDidLoad) = "onSliderInit($event)"
              (ionSlideTransitionEnd)="updateTabIndex($event)"
              [pager]="false"
              [options]="{autoHeight: true}">


            <!-- First Slide -->
            <ion-slide id="first">
            </ion-slide>

      <!-- Second Slide -->
            <ion-slide id="second">
            </ion-slide>

      <!-- third Slide -->
            <ion-slide id="third">
               <!-- this is in every slide for sure, but also commented it out, no change, just wanna show it anyway --> 
               <ion-infinite-scroll *ngIf="tabIndex == 2" threshold="100px" (ionInfinite)="loadInfiniteData($event, 'events')" >
                        <ion-infinite-scroll-content
                                class="ion-infinite-customs"
                                loadingSpinner="circles"
                                loadingText="Loading....">
                        </ion-infinite-scroll-content>
                    </ion-infinite-scroll>
            </ion-slide>

</ion-content>

And then here some stuff from the ts-file: There is for sure more, but I still try to stay as short as I can.

imports ... and so on (Ion Slides for sure!) 

export class NewsPage implements OnInit {

@ViewChild('SwipedTabsSliderNews') public SwipedTabsSliderNews: IonSlides;

constructor(){
    this.tabs = ["Tab 1 ","Tab 3", "Tab 3"];
    this.tabIndex = 0;
}

  selectTab(slide, index) {
    console.log("News: Inside selectTab with index " + index);
    console.log(slide);
    slide.slideTo(index);
    slide.getActiveIndex().then(index => {
      console.log("News inside activeindex on selectTab" + index);
      console.log(typeof(index));
      this.tabIndex = index;
      console.log(this.tabIndex);
      console.log(typeof(this.tabIndex));
    });
  }

  updateTabIndex($event){
    this.SwipedTabsSliderNews.getActiveIndex().then(index => {
      this.tabIndex = index;
    });
  }

  onSliderInit(event){
//this one got triggered multiple times when it is not the "initial View"
    console.log("On Slider Init");
    console.log(event);
  }

}

Thanks everyone!

Posts: 1

Participants: 1

Read full topic