У меня есть код ниже:
'use client';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/pagination';
export default function Component() {
const cards = [{ id: 0 }, { id: 1 }, { id: 2 }];
return (
<Swiper
slidesPerView = {3}
spaceBetween = {30}
className = "mySwiper"
>
{cards.map((card) => (
<SwiperSlide key = {card.id}>
<div className = "h-52 bg-gray-400">{card.id}</div>
</SwiperSlide>
))}
</Swiper>
)
}
Проблема: Слайды имеют полную ширину, прежде чем Swiper рассчитает их ширину. изображение до
через несколько секунд ширина будет установлена и слайды будут выглядеть так, как я ожидал изображение после
Что мне следует сделать, чтобы создать слайды с исходной шириной и избежать мерцания пользовательского интерфейса?
Я попробовал установить фиксированную ширину слайда, но это не помогло.
🤔 А знаете ли вы, что...
JavaScript поддерживает модульную структуру, что способствует организации кода на больших проектах.
Это происходит потому, что изображения и Swiper еще не смонтированы, поэтому вам необходимо установить состояние загрузки во время монтирования компонента.
Вы можете сделать это, создав скелет, который занимает место Swiper, в то время как состояние из useState равно true, и используя useEffect(), чтобы превратить это состояние в ложное, поэтому, когда компонент загружается, скелет выходит, а компонент Swiper входит на место.
Или загружайте Swiper только тогда, когда компонент смонтирован, но он получит уродливый пользовательский интерфейс и плохой UX.
Вы также можете использовать Suspense и loading.tsx, если используете компонент с асинхронными действиями, но это не ваш случай.