我正在使用 swiperjs 并且我在制作幻燈片時遇到了困難，因為它們不會捕捉到下一張幻燈片，而且我無法從它們
那里獲取活動索引這是我的代碼，我哪里出錯了我正在使用帶有離子框架的 typescript 和 swiperjs 6.84 版
import 'swiper/components/navigation/navigation.min.css'
import 'swiper/components/pagination/pagination.min.css'
const pagination = {
clickable: true,
};
return (
<IonPage>
<Swiper
pagination={pagination}
onBeforeSlideChangeStart={e => {
setIndex(e.activeIndex)
}}>
<SwiperSlide >
<item property={property} index={0} save={dispatch} activeIndex={index} />
</SwiperSlide>
<SwiperSlide >
<item 2 property={property} index={1} />
</SwiperSlide>
<SwiperSlide >
<item3 property={property} index={1} />
</SwiperSlide>
</Swiper>
<IonButton
disabled={true}
onClick={(e) => {
e.preventDefault();
}}
className={"next"}
expand={"block"}
>
Save
</IonButton>
</IonPage>
);
}
uj5u.com熱心網友回復：
我忘了添加 ionContent 所以幻燈片沒有以正確的方式反應我也不得不添加觀察
<IonPage>
<IonContent fullscreen>
<Swiper
pagination={pagination}
observeParents={true}
observer={true}
onBeforeSlideChangeStart={e => {
setIndex(e.activeIndex)
}}>
<SwiperSlide >
<item property={property} index={0} save={dispatch} activeIndex={index} />
</SwiperSlide>
<SwiperSlide >
<item 2 property={property} index={1} />
</SwiperSlide>
<SwiperSlide >
<item3 property={property} index={1} />
</SwiperSlide>
</Swiper>
<IonButton
disabled={true}
onClick={(e) => {
e.preventDefault();
}}
className={"next"}
expand={"block"}
>
Save
</IonButton>
</IonContent>
</IonPage>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/403406.html
標籤：
上一篇：如何將資料值動態添加到生成的HTML-IonicAngular
下一篇：增加數量直到滿足條件