Harmony开发-ArkUI框架速成十一Swiper布局

程序员Feri一名12年+的程序员,做过开发带过团队创过业,擅长Java、嵌入式、鸿蒙、人工智能等,专注于程序员搞钱那点儿事,希望在搞钱的路上有你相伴!君志所向,一往无前!


1.Swiper

1.1 Swiper组件

Swiper组件提供滑动轮播显示的能力。

Swiper本身是一个容器组件,当设置了多个子组件后,可以对这些子组件进行轮播显示,比如:

1.2 基本用法

首先来看看如何设置轮播内容,以及设置尺寸

  1. 轮播内容:内容作为Swiper的子组件即可

  2. 尺寸:

a. 设置 Swiper 的尺寸:内容会拉伸为和 Swiper 一致(优先级高)

b. 设置内容尺寸:会将Swiper撑开

复制代码
  @Entry
@Component
struct Index {
  // Swiper 基本使用
  build() {
    Column() {
      Text('Swiper基本使用')
        .fontSize(20)
        .fontWeight(900)
        .padding(10)
      Swiper() {
        Text('0')
          .textAlign(TextAlign.Center)
          .backgroundColor(Color.Red)
          .fontColor(Color.White)
          .fontSize(30)
        Text('1')
          .textAlign(TextAlign.Center)
          .backgroundColor(Color.Green)
          .fontColor(Color.White)
          .fontSize(30)
        Text('2')
          .textAlign(TextAlign.Center)
          .backgroundColor(Color.Blue)
          .fontColor(Color.White)
          .fontSize(30)
      }
      .width('100%')
      .height(100)
    }
    .width('100%')
    .height('100%')
  }
}

1.3 常用属性

设置了内容以及尺寸之后已经可以实现基础的轮播效果,接下来看看一些常见属性

使用上述属性,将轮播图调整为:

  1. 自动播放

  2. 播放间隔:1 秒钟

  3. 纵向滑动

1.4 调整导航点

如果默认的导航点不满足效果,可以自行调整

导航点的调整可以分为 2 类:

  1. 显示 or 隐藏

  2. 导航点类型:

a. 圆点(掌握)

b. 数字(了解)

位置属性取值:

样式属性取值:

复制代码
 Swiper() {
        Text('0')
          .textAlign(TextAlign.Center)
          .backgroundColor(Color.Red)
          .fontColor(Color.White)
          .fontSize(30)
        Text('1')
          .textAlign(TextAlign.Center)
          .backgroundColor(Color.Green)
          .fontColor(Color.White)
          .fontSize(30)
        Text('2')
          .textAlign(TextAlign.Center)
          .backgroundColor(Color.Blue)
          .fontColor(Color.White)
          .fontSize(30)
      }
      .width('100%')
      .height(100)
      .loop(false) // 是否开启循环 true/false
      .autoPlay(true) // 是否自动播放 true/false
      .interval(4000) // 自动播放时间间隔 单位毫秒
      .vertical(false) // 是否纵向滑动
      .indicator(
        Indicator.dot()
          .left(10)// 左侧距离
          .top(10)// 顶部距离
          .bottom(10)// 底部距离
          .right(10)// 右侧距离(距离属性组合使用,无需全部设置)
          .itemWidth(20)// 指示器宽度
          .itemHeight(20)// 指示器高度
          .selectedItemWidth(30)// 选中指示器宽度
          .selectedItemHeight(30)// 选中指示器高度
          .selectedColor(Color.Yellow)// 选中指示器颜色
          .color(Color.Black) // 默认指示器宽度
      ) // 圆形导航点

2 Swiper综合实践

复制代码
@Entry
@Component
struct Index {

  build() {
    Column() {
      Text('Swiper实践')
        .fontSize(20)
        .fontWeight(900)
        .padding(10)
      Swiper() {
        Image($r('app.media.lb_1'))
        Image($r('app.media.lb_2'))
        Image($r('app.media.lb_3'))
        Image($r('app.media.lb_4'))
      }
      .width('100%')
      .height(160)
      .autoPlay(true)
      .interval(2000)
      .indicator(
        Indicator.dot()// 圆形导航点
          .selectedColor(Color.Red)// 选中颜色
          .selectedItemWidth(30)// 选中宽度
          .selectedItemHeight(4)// 选中高度
          .itemWidth(10)// 默认宽度
          .itemHeight(4) // 默认高度
      )
    }
    .width('100%')
    .height('100%')
  }
}
相关推荐
长弓三石1 小时前
鸿蒙网络编程系列57-仓颉版固定包头可变包体解决TCP粘包问题
网络·tcp/ip·harmonyos
我血条子呢1 小时前
动态组件和插槽
前端·javascript·vue.js
zhanshuo2 小时前
HarmonyOS 隐私安全机制实战:动态权限、沙箱隔离与分布式授权
harmonyos
zhanshuo2 小时前
鸿蒙系统防黑秘籍:如何彻底防止恶意应用窃取用户数据?
harmonyos
爱电摇的小码农3 小时前
【深度探究系列(5)】:前端开发打怪升级指南:从踩坑到封神的解决方案手册
前端·javascript·css·vue.js·node.js·html5·xss
Tttian6224 小时前
npm init vue@latestnpm error code ETIMEDOUT
前端·vue.js·npm
元气小嘉4 小时前
前端技术小结
开发语言·前端·javascript·vue.js·人工智能
cccyi75 小时前
Vue3基础知识
javascript·vue.js
江城开朗的豌豆6 小时前
Vue计算属性:为什么我的代码突然变优雅了?
前端·javascript·vue.js
财经三剑客6 小时前
鸿蒙智行6月交付新车52747辆 单日交付量3651辆
华为·harmonyos