HarmonyOS 刷视频下拉分页的效果？

Question

刷视频下拉分页的效果，现有的List、Tab、Grid组件都不能很好地实现

Answer 1

可以使用嵌套swiper实现。具体demo如下：

import { listData, UserItem, VideoItem } from '../model/data'
​
@Entry
@Component
struct SwiperNestedScroll {
  private list: UserItem[] = listData
  @State currentIndex: number = 0
  private listScroller: Scroller = new Scroller()
  private swiperController: SwiperController = new SwiperController()
  ​
  @Builder
  TabBuilder(index: number, name: string) {
    Column() {
      Image($r("app.media.startIcon"))
        .width(80)
        .height(80)
        .border({ width: 2, color: index === this.currentIndex ? Color.Red : Color.White, radius: 40 })
      Text(name)
        .fontSize(20)
        .fontColor(index === this.currentIndex ? Color.Red : Color.White)
        .maxLines(2)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
    }.width(80).opacity(index === this.currentIndex ? 1 : 0.7).justifyContent(FlexAlign.Center)
  }
  ​
  build() {
    Column() {
      List({ space: 20, scroller: this.listScroller }) {
        ForEach(this.list, (item: UserItem, index: number) => {
          this.TabBuilder(index, item.name)
        }, (item: UserItem) => item.name)
      }.height(140).scrollBar(BarState.Off).width("100%").listDirection(Axis.Horizontal)
      ​
      Swiper(this.swiperController) {
        ForEach(this.list, (item: UserItem) => {
          Column() {
            if (item.videoList.length > 1) {
              Swiper() {
                ForEach(item.videoList, (video: VideoItem) => {
                  if (video.imgList.length == 0) {
                    Column() {
                      Image(video.videoSrc).width(300)
                    }.width("100%").layoutWeight(1).justifyContent(FlexAlign.Center)
                  } else {
                    Swiper() {
                      ForEach(video.imgList, (img: string) => {
                        Column() {
                          Image(img).width(300)
                        }
                        .width("100%")
                        .layoutWeight(1)
                        .justifyContent(FlexAlign.Center)
                      }, (img: string) => img)
                    }
                    .duration(300)
                    .loop(false)
                    .indicator(new DotIndicator()
                      .itemWidth(10)
                      .itemHeight(10)
                      .selectedItemWidth(10)
                      .selectedItemHeight(10)
                      .color(Color.Gray)
                      .selectedColor(Color.White))
                  }
                }, (video: VideoItem) => video.videoSrc)
              }
              .duration(300)
              .vertical(true)
              .width("100%")
              .height("100%")
              .nestedScroll(SwiperNestedScrollMode.SELF_FIRST)
              .loop(false)
              .indicator(false)
            } else {
              Image(item.videoList[0].videoSrc).width(300)
            }
          }
          .justifyContent(FlexAlign.Center)
        }, (item: UserItem) => item.name)
      }
      .duration(300)
      .indicator(false)
      .width("100%")
      .vertical(true)
      .layoutWeight(1)
      .nestedScroll(SwiperNestedScrollMode.SELF_ONLY)
      .loop(false)
      .onChange((index: number) => {
        this.currentIndex = index
        this.listScroller.scrollToIndex(index, true, ScrollAlign.CENTER)
      })
    }.width('100%').height("100%").backgroundColor("#343a40")
  }
}
export class UserItem {
  name: string = ""
  videoList: VideoItem[] = []
}
​
export class VideoItem {
  videoSrc: string = ""
  imgList: string[] = []
}
​
export const listData: UserItem[] = [
  {
    name: "video",
    videoList: [
      {
        videoSrc: "xxx",
        imgList: []
      }
    ]
  },
...
]