【HarmonyOS学习】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%')
  }
}

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

代码

@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)
  }
}