首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >鸿蒙开发:swiper轮播学习

鸿蒙开发:swiper轮播学习

原创
作者头像
钟子翔
发布2024-12-24 16:44:57
发布2024-12-24 16:44:57
2090
举报
文章被收录于专栏:HarmonyOSNextHarmonyOSNext

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

  • 效果展示
cke_1739.png
cke_1739.png

cke_2414.png
cke_2414.png

  • 代码
代码语言:javascript
复制
@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%')
  }
}

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

  • 效果图
cke_9228.png
cke_9228.png

cke_10348.png
cke_10348.png

  • 代码
代码语言:javascript
复制
@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)
  }
}

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 实现效果一:卡片自动轮播
  • 实现效果二:搜索栏上字体轮播
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档