0

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

<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 内。我已经尝试在没有标签的情况下直接在页面中插入幻灯片，一切正常。知道为什么标签会破坏幻灯片吗？

4

1 回答 1

0

原来，问题是由标签中包含的滑块引起的，在 此处找到解决方案

于 2020-02-20T09:30:10.227 回答