用swiper包裹一个video组件实现一个类似于短视频的功能

import { router } from '@kit.ArkUI'; 
import { mediaquery } from '@kit.ArkUI'; 
import { LiveInfoDataModel } from '../model/LiveDataModel'; 
import { LiveData } from '../mock/LiveData'; 
import { Live } from '../net/Utils'; 
import { CommentPage } from './CommentPage'; 
import { Callback } from '@kit.BasicServicesKit'; 
 
class LiveInfoResponse { 
  code: number = 0; 
  data: Array<Info> = []; 
} 
 
class Info { 
  uri: string = ''; 
  name: string = ''; 
  peopleNum: string = ''; 
} 
 
@Entry 
@Component 
export struct LivePage { 
  @State active: number = 0; 
  @State liveInfoList: Array<LiveInfoDataModel> = []; 
  @State mData: LiveInfoResponse = { 
    code: 0, 
    data: [{ uri: '', name: '', peopleNum: '' }] 
  } 
  @State isPhone: boolean = false; 
  portraitFunc: Callback<mediaquery.MediaQueryResult> = (mediaQueryResult: mediaquery.MediaQueryResult): void => { 
    this.onPortrait(mediaQueryResult); 
  }; 
  listenerIsPhone = mediaquery.matchMediaSync('(orientation:landscape)'); 
 
  onPortrait(mediaQueryResult: mediaquery.MediaQueryResult) { 
    this.isPhone = !mediaQueryResult.matches; 
  } 
 
  async aboutToAppear() { 
    //媒体资源加载 
    LiveData.forEach((item) => { 
      this.liveInfoList.push(new LiveInfoDataModel(item)); 
    }) 
    this.listenerIsPhone.on('change', this.portraitFunc); 
 
    try { 
      let a = await Live(); 
      this.mData = JSON.parse(a.result.toString()); 
      this.liveInfoList = this.mData.data; 
    } catch (error) { 
      console.log('http resquest is fail:' + error); 
    } 
  } 
 
  build() { 
    Scroll() { 
      Column() { 
        Swiper() { 
          ForEach(this.liveInfoList, (item: LiveInfoDataModel, index) => { 
            Stack() { 
              if (this.active === index) { 
                Video({ src: item.uri }) 
                  .autoPlay(true) 
                  .loop(false) 
                  .controls(false) 
                  .objectFit(ImageFit.Contain) 
                  .width('100%') 
                  .height('100%') 
              } 
 
              Row() { 
                Row() { 
                  Row() { 
                    Image($r('app.media.live_author')) 
                      .width(38) 
                      .height(38) 
 
                    Column() { 
                      Text(item.name) 
                        .fontSize(16) 
                        .fontColor('#ffffff') 
                      Row() { 
                        Text(item.peopleNum) 
                          .id(item.peopleNum as string) 
                          .fontSize(12) 
                          .fontColor('#ffffff') 
                        Text($r('app.string.watch')) 
                          .fontSize(12) 
                          .fontColor('#ffffff') 
                      } 
                    } 
                    .alignItems(HorizontalAlign.Start) 
                    .padding({ left: '3%' }) 
                  } 
 
                  Image($r('app.media.live_attention')) 
                    .height(35) 
                    .width(59) 
                } 
                .justifyContent(FlexAlign.SpaceBetween) 
                .padding({ left: this.isPhone ? '2%' : '1%', right: this.isPhone ? '2%' : '1%' }) 
                .width(this.isPhone ? '57.2%' : '30%') 
                .aspectRatio(this.isPhone ? 5.15 : 7) 
                .backgroundColor('rgba(0,0,0,0.40)') 
                .borderRadius(this.isPhone ? 26 : 36) 
 
                Column() { 
                  Image($r('app.media.live_share')) 
                    .width(42) 
                    .height(42) 
                } 
                .margin({ left: this.isPhone ? '12%' : '49%' }) 
 
                Column() { 
                  Image($r('app.media.live_close')) 
                    .id('close') 
                    .width(42) 
                    .height(42) 
                    .onClick(() => { 
                      router.back(); 
                    }) 
                } 
                .margin({ left: '4%' }) 
              } 
              .position({ x: '4.4%', y: '5.1%' }) 
 
              Column() { 
                CommentPage() 
 
              } 
              .position({ x: '4.4%', y: this.isPhone ? '72%' : '62%' }) 
            } 
            .backgroundColor('#D8D8D8') 
            .width('100%') 
            .height('100%') 
          }) 
        } 
        .width('100%') 
        .height('100%') 
        .loop(false) 
        .indicator(false) 
        .vertical(true) 
        .onChange((index: number) => { 
          this.active = index; 
        }) 
      } 
    } 
  } 
}