我正在使用Ionic framework 4
和react
开发移动应用程序。我能够成功实现幻灯片。
我正在寻找的是对幻灯片更改进行一些操作。 Ionic确实提供了一个捕获ionSlideDidChange
的事件,但是没有有关如何使用react来实现此事件处理程序的教程。
非常感谢您提供有关示例的帮助。
我的代码在下面。
<IonSlides scrollbar={true} options={slideOpts}>
<IonSlide>
<Beginning></Beginning>
</IonSlide>
<IonSlide>
<IonCard>
<IonCardHeader>
<IonCardSubtitle><strong>Slide 1</strong></IonCardSubtitle>
<IonCardTitle>Card Title</IonCardTitle>
</IonCardHeader>
<IonCardContent>
Keep close to Nature's heart... and break clear away, once in a while,
and climb a mountain or spend a week in the woods. Wash your spirit clean.
</IonCardContent>
</IonCard>
</IonSlide>
<IonSlide>
<IonCard>
<IonCardHeader>
<IonCardSubtitle><strong>Slide 2</strong></IonCardSubtitle>
<IonCardTitle>Card Title</IonCardTitle>
</IonCardHeader>
<IonCardContent>
Keep close to Nature's heart... and break clear away, once in a while,
and climb a mountain or spend a week in the woods. Wash your spirit clean.
</IonCardContent>
</IonCard>
</IonSlide>
<IonSlide>
<IonCard>
<IonCardHeader>
<IonCardSubtitle><strong>Slide 3</strong></IonCardSubtitle>
<IonCardTitle>Card Title</IonCardTitle>
</IonCardHeader>
<IonCardContent>
Keep close to Nature's heart... and break clear away, once in a while,
and climb a mountain or spend a week in the woods. Wash your spirit clean.
</IonCardContent>
</IonCard>
</IonSlide>
</IonSlides>
我认为您想要在标签的道具中包含onIonSlideDidChange={()=> console.log("SLIDES CHANGED")}
。
例如/
<IonSlides scrollbar={true} options={slideOpts} onIonSlideDidChange={()=> console.log("SLIDES CHANGED")}>
<IonSlide>
<Beginning></Beginning>
</IonSlide>
<IonSlide>
<IonCard>
<IonCardHeader>
<IonCardSubtitle><strong>Slide 1</strong></IonCardSubtitle>
<IonCardTitle>Card Title</IonCardTitle>
</IonCardHeader>
<IonCardContent>
Keep close to Nature's heart... and break clear away, once in a while,
and climb a mountain or spend a week in the woods. Wash your spirit clean.
</IonCardContent>
</IonCard>
</IonSlide>
<IonSlide>
<IonCard>
<IonCardHeader>
<IonCardSubtitle><strong>Slide 2</strong></IonCardSubtitle>
<IonCardTitle>Card Title</IonCardTitle>
</IonCardHeader>
<IonCardContent>
Keep close to Nature's heart... and break clear away, once in a while,
and climb a mountain or spend a week in the woods. Wash your spirit clean.
</IonCardContent>
</IonCard>
</IonSlide>
<IonSlide>
<IonCard>
<IonCardHeader>
<IonCardSubtitle><strong>Slide 3</strong></IonCardSubtitle>
<IonCardTitle>Card Title</IonCardTitle>
</IonCardHeader>
<IonCardContent>
Keep close to Nature's heart... and break clear away, once in a while,
and climb a mountain or spend a week in the woods. Wash your spirit clean.
</IonCardContent>
</IonCard>
</IonSlide>
</IonSlides>
每次更改幻灯片时,它都会发布到控制台。当然,这可以指向方法而不是控制台日志!
编辑:
更重要的方法(而不是控制台日志记录)是使用其中一种方法,例如getActiveIndex(),它为您提供当前卡的索引;
const getIndex = async (event: any) => {
let index: number = 0;
await event.target.getActiveIndex().then((value: any) => (index=value));
{console.log(index)}
.......... do whatever with the index ..........
}
<IonSlides scrollbar={true} options={slideOpts} onIonSlideDidChange={(event: any)=> getIndex(event)}>