纯血鸿蒙APP实战开发——短视频切换实现案例

短视频切换实现案例

介绍

短视频切换在应用开发中是一种常见场景，上下滑动可以切换视频，十分方便。本模块基于Swiper组件和Video组件实现短视频切换功能。

效果图预览

使用说明

1. 上下滑动可以切换视频。
2. 点击屏幕暂停视频，再次点击继续播放。

实现思路

1. 使用Swiper创建一个竖直的可上下滑动的框架。源码参考VideoSwiper.ets。

   Swiper(this.swiperController) {
         
      LazyForEach(this.data, (item: VideoData, index: number) => {
        
         Stack({
         alignContent: Alignment.BottomEnd }) {
        
            Vedio()
         }, (item: VideoData) => JS