带你读《2022技术人的百宝黑皮书》——短视频无尽流前端开发指南(4) https://developer.aliyun.com/article/1243498?groupCode=taobaotech
swiper入参配置可参考：
// 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> ); };
tips：移动端swiper切换时可能存在闪屏/抖动的异常情况，可以使用如下代码开启硬件加速，可以解决大部分异常情况。
.videoSwiperContainer :global { .swiper-wrapper { transform: translate3d(0, 0, 0); .swiper-slide { transform: translate3d(0, 0, 0); } } }
视频播放器实例管理
上述中提到只需要屏幕当中的那一个内容卡片渲染播放器，其余展示封面图占位即可。在轮播容器完成一次切换即 onTransitionEnd 时销毁上一个内容卡片的播放器，同时激活当前内容卡片的播放器，保证始终只有一个播放器处于激活状态。
tips：当前内容卡片的播放器激活后，由于还需要加载视频资源，因此切换后会有短暂的等待时间。为了提升用户体验，可以配合视频资源的预加载，优先使用端侧提供的预加载能力，若没有该支持，可以尝试使用blob等预加载方案。
带你读《2022技术人的百宝黑皮书》——短视频无尽流前端开发指南(6) https://developer.aliyun.com/article/1243496?groupCode=taobaotech
