ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
51.09k stars 13.51k forks source link

bug: pager not updating on navigation #5745

Closed dylanvdmerwe closed 8 years ago

dylanvdmerwe commented 8 years ago

Short description of the problem:

After a new page has been pushed onto the navController, when navigating back to the ion-slides page, the pager is stuck on page 1.

What behavior are you expecting?

The pager gets stuck on index 1 and does not change when moving through the ion-slide views.

Steps to reproduce:

  1. Create an ion-slides page with a few ion-slide views inside. The last ion-slide to have a button that pushes a new page onto the NavController.
  2. Press the button to push a new page onto the NavController.
  3. Press the navbar back button to return back to the ion-slides page.
  4. You should now be on the last ion-slide in the ion-slides component. Pager is now stuck on index 1 and does not update.

Ionic Version: 2.x

Browser & Operating System: iOS / Android / Chrome

Run ionic info from terminal/cmd prompt:

Cordova CLI: 6.0.0
Ionic Version: 2.0.0-beta.2
Ionic CLI Version: 2.0.0-beta.19
Ionic App Lib Version: 2.0.0-beta.9
OS:
Node Version: v5.7.0
jgw96 commented 8 years ago

Thanks for opening an issue with us! I appreciate the detail! Would you mind making a codepen or a repo that we can use to repro this issue please?

dylanvdmerwe commented 8 years ago

Navigation: Page 1 (has slider) -> Page 4 (has slider) -> Page 2 (blank) Then go back to Page 1 and the slider's pager gets stuck.

Page 1 HTML

<ion-navbar *navbar>
    <ion-title>Tab 1</ion-title>
</ion-navbar>
<ion-content>
    <ion-slides pager loop="true" autoplay="true">

        <ion-slide style="background-color: green">
            <h2>Slide 1</h2>
        </ion-slide>

        <ion-slide style="background-color: blue">
            <h2>Slide 2</h2>
        </ion-slide>

        <ion-slide style="background-color: red">
            <h2>Slide 3</h2>
            <button (click)="push()">Push</button>
        </ion-slide>

    </ion-slides>
</ion-content>

Page 1 TS

import {Page4} from '../page4/page4';

@Page({
  templateUrl: 'build/pages/page1/page1.html',
})
export class Page1 {
    constructor(private nav:NavController){

    }

    push() {
        this.nav.push(Page4);
    }
}

Page 4 HTML is identical to Page 1 above Page 4 TS is the same as above except it pushes Page2 onto NavController.

Page 2 TS

<ion-navbar *navbar>
  <ion-title>
    Tab 2
  </ion-title>
</ion-navbar>

<ion-content class="page2">

</ion-content>

Result when navigating back to Page 1: capture

jgw96 commented 8 years ago

Was able to confirm this, here is a repo you can pull and use to repro it: https://github.com/jgw96/Ionic2-Slides-Test

brandyscarney commented 8 years ago

Thanks for the issue! Should be fixed in the beta.5 release. :smile: