【HarmonyOS Next】swiper轮播

奥尼5354

发布于 2025-3-10 22:16

浏览

0收藏

实现效果一：卡片自动轮播

【HarmonyOS Next】swiper轮播-鸿蒙开发者社区

代码

@Entry
@Component
struct Swiper_Page {
  @Builder
  ShowText(text: string, color: Color) {
    Text(text)
      .fontSize(80)
      .fontColor(Color.White)
      .backgroundColor(color)
      .width('100%')
      .height('100%')
      .textAlign(TextAlign.Center)
  }

  build() {
    Column() {
      Swiper() {
        this.ShowText("0", Color.Blue);
        this.ShowText("1", Color.Gray);
        this.ShowText("2", Color.Brown);
      }
      .height(300)
      .margin(10)
      .autoPlay(true) //开启自动轮播
      .loop(true) //开启循环播放
      .duration(100) //轮播图滑动的时间
      .interval(2000) //滑动间隔时间
    }
    .height('100%')
    .width('100%')
  }
}
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.

实现效果二：搜索栏上字体轮播

【HarmonyOS Next】swiper轮播-鸿蒙开发者社区

代码

@Entry
@Component
struct Swiper_Page2 {
  @State textNameList: string[] = [
    "测试1",
    "测试2",
    "测试3",
    "测试4",
    "测试5",
    "测试6",
  ]

  build() {
    Column() {
      Row() {
        Swiper() {
          ForEach(this.textNameList, (text: string, index: number) => {
            Text(text)
              .fontSize(16)
              .fontColor(Color.Gray)
          })
        }
        .autoPlay(true)
        .loop(true)
        .margin({ left: 20 })
        .vertical(true)
        .interval(1000)
        .indicator(false)

        Button("搜索")
          .margin({ right: 10 })
          .borderRadius(15)
          .type(ButtonType.Normal)
      }
      .width('80%')
      .backgroundColor(Color.White)
      .height(50)
      .borderRadius(20)
      .margin({ top: 20, left: 20 })
      .justifyContent(FlexAlign.SpaceBetween)
    }
    .height('100%')
    .width('100%')
    .backgroundColor(Color.Gray)
    .alignItems(HorizontalAlign.Start)
  }
}
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.