Ionic 4 IonSlides slideTo 和 getActiveIndex 在 IonTab 中使用时不起作用答案

【问题标题】：Ionic 4 IonSlides slideTo and getActiveIndex not working when used inside IonTabIonic 4 IonSlides slideTo 和 getActiveIndex 在 IonTab 中使用时不起作用
【发布时间】：2020-02-20 17:30:10
【问题描述】：

我在这样的页面中有一个离子幻灯片：

<ion-slides #schemasliderref [options]="schemaSliderOpts" (ionSlideDidChange)="slideChange()">
    <ion-slide  *ngFor="let schemaImage of schemaImages; let i = index">
      <img [src]="schemaImage.url">
    </ion-slide>
  </ion-slides>

这是我的组件：

export class TabSchemes implements OnInit {
public schemaImages = [
    {
        url: 'some url',
        label: 'Immagine 1 Immagine 1 Immagine 1 Immagine 1 Immagine 1 Immagine 1 Immagine 1 Immagine 1 Immagine 1 Immagine 1 Immagi'
    },
    {
        url: 'some url',
        label: 'Immagine 2'
    },
    {
        url: 'some url',
        label: 'Immagine 3'
    }
];

public schemaSliderOpts: any = {};
public schemaSliderActiveIndex = 0;
@ViewChild('schemasliderref', {static: false}) schemaSliderRef: IonSlides;

ngOnInit() {
    this.schemaSliderOpts = {
        initialSlide: this.schemaSliderActiveIndex,
        speed: 400,
        direction: 'vertical'
    };
}

onSchemaLabelClick(slideIndex) {
    this.schemaSliderRef.slideTo(slideIndex);
    this.schemaSliderActiveIndex = slideIndex;
    console.log('label click ' + slideIndex);
}

slideChange() {
    console.log('slide changing');
    this.schemaSliderRef.getActiveIndex().then((index) => {
        this.schemaSliderActiveIndex = index;
        console.log('slide change ' + index);
    });
    }
}

问题是 slideTo 和 getActiveIndex 方法都不起作用，我也尝试等待承诺的捕获，但没有任何反应。有人可以帮我弄清楚原因吗？

更新：我的 ionslide 在 IonTab 内。我尝试在没有标签的情况下直接在页面中插入幻灯片，一切正常。知道为什么标签会破坏幻灯片吗？

【问题讨论】：

如果您将幻灯片direction 设置为水平而不是垂直，问题是否仍然存在？我注意到垂直幻灯片没有显示任何对我有用的东西，我必须使用大量 CSS 才能将标记设置为看起来像你想要的东西？
@haron68 是的，我现在尝试使用水平方向并删除所有 css，但问题仍然存在，我为此发疯

标签： angular typescript ionic-framework ionic4 ion-slides

【解决方案1】：

原来，问题是由于滑块包含在选项卡中引起的，解决方案 found here

【讨论】：