HarmonyOS 刷视频下拉分页的效果

可以使用嵌套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: []
      }
    ]
  },
...
]
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.