我第一次在 React 中使用 Ionic。使用 swiper 時，不考慮每個視圖屬性的幻燈片數量，只顯示 1 張幻燈片。我究竟做錯了什么？
我正在使用以下匯入：
`import { Swiper, SwiperSlide } from 'swiper/react';
匯入'swiper/swiper-bundle.css'`
<IonGrid>
<IonRow>
<IonCol size="3">
<IonSelect
onIonChange={((e) => {
setForm({album: form.album, month: form.month, year: e.detail.value});
})}
value={String(form.year)}>
{[...Array(10)].map((num, i) =>
<IonSelectOption
key={`year_${form.year - i}`}>
{form.year - i}
</IonSelectOption>
)}
</IonSelect>
</IonCol>
<IonCol size="9">
<Swiper
slidesPerView={6}
onSwiper={(swiper) => console.log(swiper)}
onTap={(context) => onMonthTap(context)}
initialSlide={ form.month }>
{["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"].map((mon, idx) => {
return (
<>
<SwiperSlide key={`month_${idx}`}>
<IonLabel>{form.month === idx ? <b>{mon}</b> : mon}</IonLabel>
</SwiperSlide>
</>
)
})}
</Swiper>
</IonCol>
</IonRow>
</IonGrid>
uj5u.com熱心網友回復：
進行 swiper 更新有幫助，但只有在引入一些延遲之后。我不確定這是否是正確的答案，但暫時對我有用。
<Swiper
slidesPerView={6}
spaceBetween={10}
onSwiper={(swiper) => setSwiperInstance(swiper)}
onTap={(context) => onMonthTap(context)}
initialSlide={ month }
>
useEffect(() => {
const timeout = setTimeout(() => {
swiperInstance && swiperInstance.update();
}, 50);
}, [swiperInstance]);
uj5u.com熱心網友回復：
您可以將 slideOpts 作為引數傳遞給 swiper
// Optional parameters to pass to the swiper instance.
// See http://idangero.us/swiper/api/ for valid options.
const slideOpts = {
initialSlide: 1,
speed: 400
};
export const SlidesExample: React.FC = () => (
<IonContent>
<IonSlides pager={true} options={slideOpts}>
<IonSlide>
<h1>Slide 1</h1>
</IonSlide>
<IonSlide>
<h1>Slide 2</h1>
</IonSlide>
<IonSlide>
<h1>Slide 3</h1>
</IonSlide>
</IonSlides>
</IonContent>
);
uj5u.com熱心網友回復：
使用useLayoutEffect而不是useEffect將在第一次繪制之前更新 swiper 并且應該可以解決您的問題
useLayoutEffect(() => {
swiperInstance && swiperInstance.update();
}, [swiperInstance]);
在瀏覽器有機會繪制之前， useLayoutEffect 中計劃的更新將同步重繪 。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/312545.html
下一篇：離子反應閃屏顯示兩次與電容器