ionSlideDidChange with react

问题描述 投票:0回答:1

我正在使用Ionic framework 4react开发移动应用程序。我能够成功实现幻灯片。

我正在寻找的是对幻灯片更改进行一些操作。 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>
reactjs ionic-framework
1个回答
0
投票

我认为您想要在标签的道具中包含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>

每次更改幻灯片时,它都会发布到控制台。当然,这可以指向方法而不是控制台日志!

enter image description here

编辑:

更重要的方法(而不是控制台日志记录)是使用其中一种方法,例如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)}>
© www.soinside.com 2019 - 2024. All rights reserved.