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%')
  }
}
相关推荐
qq_424409191 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding1 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜1 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
爱笑的眼睛111 小时前
08-自然壁纸实战教程-视频列表-云
华为·harmonyos
SevgiliD1 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding1 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
鱼 空2 小时前
解决el-table右下角被挡住部分
javascript·vue.js·elementui
01传说3 小时前
vue3 配置安装 pnpm 报错 已解决
java·前端·vue.js·前端框架·npm·node.js
sunbyte5 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
拾光拾趣录6 小时前
虚拟DOM
前端·vue.js·dom