ionic-team / ionic-v3

The repo for Ionic 3.x. For the latest version of Ionic, please see https://github.com/ionic-team/ionic
Other
127 stars 85 forks source link

Ionic 3 slideTo not working. #854

Open ionitron-bot[bot] opened 5 years ago

ionitron-bot[bot] commented 5 years ago

Original issue by @shahrushabh1996 on 2018-03-24T15:27:58Z

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

I'm submitting a ... (check one with "x") [X] bug report [ ] feature request

Related code:

import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams, Slides } from 'ionic-angular';
import { PhotoViewer } from '@ionic-native/photo-viewer';

/**
 * Generated class for the SliderPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-slider',
  templateUrl: 'slider.html',
})
export class SliderPage {

  @ViewChild(Slides) slides: Slides;

  images: any;

  active_slide_index: number = 1;

  constructor(public navCtrl: NavController, public navParams: NavParams, public photoViewer: PhotoViewer) {
    this.images = navParams.get('images');
    this.active_slide_index = navParams.get('active_slide_index');
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad SliderPage');
  }

  ngAfterViewInit() {
    this.slides.slideTo(active_slide_index, 500);
  }

  zoomImage(image) {
    this.photoViewer.show(image);
  }

}
<!--
  Generated template for the DetailPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title class="capitalize">Slider</ion-title>
  </ion-navbar>

</ion-header>

<ion-content>
    <ion-slides>
        <ion-slide *ngFor="let image of images"  (click)="zoomImage(image)">
          <img src="{{image}}" />
        </ion-slide>
    </ion-slides>
</ion-content>

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

Uncaught (in promise): TypeError: Cannot read property 'length' of undefined TypeError: Cannot read property 'length' of undefined at slideTo (http://localhost:8100/build/vendor.js:50386:37) at Slides.slideTo (http://localhost:8100/build/vendor.js:59861:80) at SliderPage.webpackJsonp.309.SliderPage.ngAfterViewInit (http://localhost:8100/build/2.js:80:21) at callProviderLifecycles (http://localhost:8100/build/vendor.js:12782:18) at callElementProvidersLifecycles (http://localhost:8100/build/vendor.js:12753:13) at callLifecycleHooksChildrenFirst (http://localhost:8100/build/vendor.js:12737:17) at checkAndUpdateView (http://localhost:8100/build/vendor.js:13870:5) at callWithDebugContext (http://localhost:8100/build/vendor.js:15094:42) at Object.debugCheckAndUpdateView [as checkAndUpdateView] (http://localhost:8100/build/vendor.js:14631:12) at ViewRef_.detectChanges (http://localhost:8100/build/vendor.js:11654:18)

Ionic Framework: 3.9.2 Ionic App Scripts: 3.1.8 Angular Core: 5.0.3 Angular Compiler CLI: 5.0.3 Node: 8.10.0 OS Platform: Windows 8.1 Navigator Platform: Win32 User Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36

Hi ionic team here is a new bug can you please tell me How can I solve this?

Stnaire commented 5 years ago

I have made a directive to handle the problem. The idea is to add a temporary element at the bottom of the .scroll-content created by the ion-content element at the exact height of the keyboard, and then make the view scroll to center the input in the visible area.

You can find it here: https://gist.github.com/Stnaire/6cd5a07f404b3e50bd7f390762ebc349

If it can help someone..