search

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
50.94k stars 13.52k forks source link

Slides.slideTo doesnt slide to the corresponding index #11866

Closed p595285902 closed 7 years ago

p595285902 commented 7 years ago

Ionic version: (check one with "x") [ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1) [ ] 2.x [x ] 3.x

I'm submitting a ... (check one with "x") [x ] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

When using Slides.slideTo(5.0) gives me 5th slides after a list of steps while Slides.getActiveIndex = 5 after calling the slideTo method.

Expected behavior:

Slide.slideTo(5,0) should slide to 6th slides.

Steps to reproduce:

Steps are described in the log showing below. Steps with issues are marked with <---------------------------- When calling slideTo(5,0) after a list of steps, it is pointing to index 4 instead of 5, and then slidePrev is sliding to index 3. Related code:

**Typescript**

   reachStartCallback() {
        if (this.currentPage == 0) {
            return;
        }
        this.search(this.currentPage - 1, (response) => {
            ...
            let firstTwo = this.photos.slice(0,2);
            ...
            this.photos = response.concat(firstTwo);
            console.log("photos.length is "+this.photos.length);
            console.log("sliding to "+this.photos[this.photos.length - 2].id);
            this.slider.slideTo(this.photos.length - 2, 0);
            console.log("after slideTo activeIndex = "+this.slider.getActiveIndex());
            console.log("after slideTo id= "+this.photos[this.slider.getActiveIndex()].id);
            this.currentPage--;
            console.log(this.photos.map((a,b)=>a.id));
        });
    }

   slidePrevEnd() {
        console.log("sliding Prev to "+this.slider.getActiveIndex());
        if (this.slider.getActiveIndex() == 0)
            this.reachStartCallback();
    }
    slideNextEnd() {
        console.log("sliding Next to "+this.slider.getActiveIndex());
        this.addToViewedList();
        if (this.slider.getActiveIndex() == (this.photos.length - 1))
            this.reachEndCallback();
    }

**HTML**
          <ion-slides #slider initialSlide="initialSlide" class="slider" (tap)="toggleCaption=!toggleCaption" zoom="true" 
        (ionSlidePrevEnd)="slidePrevEnd()" (ionSlideNextEnd)="slideNextEnd()">
        <ion-slide *ngFor="let photo of photos;">
                      ...
               </ion-slide>
    </ion-slides>

**Logs**
search for page 0  main.js:63003:9
Array [ "5924c53c524d260d7c98b0cf", "5924c53c524d260d7c98b0c8", "5924c53c524d260d7c98b0c5", "5924c53c524d260d7c98b0c4", "5924c53c524d260d7c98b0c1" ]  main.js:63042:13
sliding Prev to NaN  main.js:63014:9
sliding Next to 1  main.js:63019:9
sliding Next to 2  main.js:63019:9
sliding Next to 3  main.js:63019:9
sliding Next to 4  main.js:63019:9
search for page 1  main.js:63003:9
sliding Prev to 1  main.js:63014:9
Array [ "5924c53c524d260d7c98b0c4", "5924c53c524d260d7c98b0c1", "5924c53b524d260d7c98b09e", "5924c53b524d260d7c98b09f", "5924c53b524d260d7c98b097", "5924c53b524d260d7c98b095", "5924c53b524d260d7c98b093" ]  main.js:63042:13
sliding Next to 2  main.js:63019:9
sliding Next to 3  main.js:63019:9
sliding Next to 4  main.js:63019:9
sliding Next to 5  main.js:63019:9
sliding Next to 6  main.js:63019:9
search for page 2  main.js:63003:9
sliding Prev to 1  main.js:63014:9
Array [ "5924c53b524d260d7c98b095", "5924c53b524d260d7c98b093", "5924c53b524d260d7c98b092", "last" ]  main.js:63042:13
sliding Next to 2  main.js:63019:9
sliding Next to 3  main.js:63019:9
sliding Prev to 2  main.js:63014:9
sliding Prev to 1  main.js:63014:9
sliding Prev to 0  main.js:63014:9
search for page 1  main.js:63003:9
photos.length is 5  main.js:63055:13
sliding to 5924c53b524d260d7c98b095  main.js:63056:13
sliding Next to 3  main.js:63019:9
after slideTo activeIndex = 3  main.js:63058:13
after slideTo id= 5924c53b524d260d7c98b095  main.js:63059:13
Array [ "5924c53b524d260d7c98b09e", "5924c53b524d260d7c98b09f", "5924c53b524d260d7c98b097", "5924c53b524d260d7c98b095", "5924c53b524d260d7c98b093" ]  main.js:63061:13
sliding Prev to 2  main.js:63014:9
sliding Prev to 1  main.js:63014:9
sliding Prev to 0  main.js:63014:9
search for page 0  main.js:63003:9
photos.length is 7  main.js:63055:13
sliding to 5924c53b524d260d7c98b09e  main.js:63056:13
sliding Next to 5  main.js:63019:9
after slideTo activeIndex = 5  main.js:63058:13   <----------------------------
after slideTo id= 5924c53b524d260d7c98b09e  main.js:63059:13
Array [ "5924c53c524d260d7c98b0cf", "5924c53c524d260d7c98b0c8", "5924c53c524d260d7c98b0c5", "5924c53c524d260d7c98b0c4", "5924c53c524d260d7c98b0c1", "5924c53b524d260d7c98b09e", "5924c53b524d260d7c98b09f" ]  main.js:63061:13
sliding Prev to 3  main.js:63014:9                      <----------------------------
sliding Prev to 2

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Your system information:

 ordova CLI: 6.5.0
Ionic Framework Version: 3.3.0
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.10.2
Xcode version: Not installed
jgw96 commented 7 years ago

Hello, thanks for opening an issue with us. I am going to close this issue as a duplicate of https://github.com/ionic-team/ionic/issues/7616.

p595285902 commented 7 years ago

Thanks @jgw96 , but I believe they are different.

Their issue is having wrong activeIndex when calling slideNext(). The issue I am having is wrong slide. The activeIndex is pointing to N which is what I want but the slide is showing the item with index N-1.

Also tried realIndex that @PhilippStein is suggesting. But realIndex is not the "real one". Please check out the log below.

    slidePrevEnd() {
        console.log("sliding Prev to active index = "+this.slider.getActiveIndex());
        console.log("sliding Prev to real index = "+this.slider.realIndex);
        if (this.slider.getActiveIndex() == 0)
            this.reachStartCallback();
    }
    slideNextEnd() {
        console.log("sliding Next to active index = "+this.slider.getActiveIndex());
        console.log("sliding Next to real index = "+this.slider.realIndex);
        this.addToViewedList();
        if (this.slider.getActiveIndex() == (this.photos.length - 1))
            this.reachEndCallback();
    }

**Logs**
search for page 0  main.js:63003:9
Will-change memory consumption is too high. Budget limit is the document surface area multiplied by 3 (324093 px). Occurrences of will-change over the budget will be ignored.  localhost:8100
Array [ "5924c53c524d260d7c98b0d8", "5924c53c524d260d7c98b0d3", "5924c53c524d260d7c98b0d1", "5924c53c524d260d7c98b0d0", "5924c53c524d260d7c98b0cf" ]  main.js:63044:13
sliding Prev to active index = NaN  main.js:63014:9
sliding Prev to real index = undefined  main.js:63015:9
sliding Next to active index = 1  main.js:63020:9
sliding Next to real index = 1  main.js:63021:9
sliding Next to active index = 2  main.js:63020:9
sliding Next to real index = 2  main.js:63021:9
sliding Next to active index = 3  main.js:63020:9
sliding Next to real index = 3  main.js:63021:9
sliding Next to active index = 4  main.js:63020:9
sliding Next to real index = 4  main.js:63021:9
search for page 1  main.js:63003:9
sliding Prev to active index = 1  main.js:63014:9
sliding Prev to real index = 1  main.js:63015:9
Array [ "5924c53c524d260d7c98b0d0", "5924c53c524d260d7c98b0cf", "5924c53c524d260d7c98b0c8", "5924c53c524d260d7c98b0c5", "5924c53c524d260d7c98b0c4", "5924c53c524d260d7c98b0c1", "5924c53b524d260d7c98b09e" ]  main.js:63044:13
sliding Next to active index = 2  main.js:63020:9
sliding Next to real index = 2  main.js:63021:9
sliding Next to active index = 3  main.js:63020:9
sliding Next to real index = 3  main.js:63021:9
sliding Next to active index = 4  main.js:63020:9
sliding Next to real index = 4  main.js:63021:9
sliding Next to active index = 5  main.js:63020:9
sliding Next to real index = 5  main.js:63021:9
sliding Next to active index = 6  main.js:63020:9
sliding Next to real index = 6  main.js:63021:9
search for page 2  main.js:63003:9
sliding Prev to active index = 1  main.js:63014:9
sliding Prev to real index = 1  main.js:63015:9
Array [ "5924c53c524d260d7c98b0c1", "5924c53b524d260d7c98b09e", "5924c53b524d260d7c98b09f", "5924c53b524d260d7c98b097", "5924c53b524d260d7c98b095", "5924c53b524d260d7c98b093", "5924c53b524d260d7c98b092" ]  main.js:63044:13
sliding Next to active index = 2  main.js:63020:9
sliding Next to real index = 2  main.js:63021:9
sliding Next to active index = 3  main.js:63020:9
sliding Next to real index = 3  main.js:63021:9
sliding Next to active index = 4  main.js:63020:9
sliding Next to real index = 4  main.js:63021:9
sliding Next to active index = 5  main.js:63020:9
sliding Next to real index = 5  main.js:63021:9
sliding Next to active index = 6  main.js:63020:9
sliding Next to real index = 6  main.js:63021:9
search for page 3  main.js:63003:9
sliding Prev to active index = 1  main.js:63014:9
sliding Prev to real index = 1  main.js:63015:9
Array [ "5924c53b524d260d7c98b093", "5924c53b524d260d7c98b092", "last" ]  main.js:63044:13
sliding Next to active index = 2  main.js:63020:9
sliding Next to real index = 2  main.js:63021:9
sliding Prev to active index = 1  main.js:63014:9
sliding Prev to real index = 1  main.js:63015:9
sliding Prev to active index = 0  main.js:63014:9
sliding Prev to real index = 0  main.js:63015:9
search for page 2  main.js:63003:9
photos.length is 5  main.js:63057:13
Calling slideTo (3)  main.js:63058:13
sliding Next to active index = 3  main.js:63020:9            <---------------------
sliding Next to real index = 0  main.js:63021:9               <---------------------
after slideTo activeIndex = 3  main.js:63062:13
after slideTo id= 5924c53b524d260d7c98b093  main.js:63063:13
real index = 0  main.js:63064:13
Array [ "5924c53b524d260d7c98b09f", "5924c53b524d260d7c98b097", "5924c53b524d260d7c98b095", "5924c53b524d260d7c98b093", "5924c53b524d260d7c98b092" ]  main.js:63066:13
sliding Prev to active index = 1  main.js:63014:9            <-----------the slider is showing the item of index 2, so sliding prev is sliding to 1; but it should showing 3 and sliding prev to 2-----------
sliding Prev to real index = 1
ionitron-bot[bot] commented 6 years ago

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.