带你读《2022技术人的百宝黑皮书》——短视频无尽流前端开发指南(5)

// swiper 6.x版本 和 8.x版本 使用上会有一定区别，注释中会将不同点标注出来
import * as React from 'react';
// [swiper 8.x] 引入 swiper
import { Virtual } from 'swiper';
// [swiper 6.x] 引入 swiper
// import SwiperCore, { Virtual } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';
import type { FC } from 'react';
import type { IVideoCardItem } from '../../types
import styles from './index.module.less';
// [swiper 6.x] 加载 Virtual 模块
// SwiperCore.use([Virtual]);
const VideoSwiper: FC = () => {
 return (
 <Swiper
 className={styles.videoSwiperContainer}
 // 切换方向
 direction="vertical"
 // 初始索引
 initialSlide={0}
 // 切换角度，防止误切
 touchAngle={30}
 // [swiper 8.x] 加载 Virtual 模块
 modules={[Virtual]}
 // virtual配置，如下配置会保证至多有5 slide
 virtual={{
 // 在active的slide前多渲染1个slide
 addSlidesBefore: 1,
 // 在active的slide后多预渲染1个slide
 addSlidesAfter: 1,
 }}
 >
 {/* ... */}
 </Swiper>
 );
};

.videoSwiperContainer :global {
 .swiper-wrapper {
 transform: translate3d(0, 0, 0);
 .swiper-slide {
 transform: translate3d(0, 0, 0);
 }
 }
}