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%')
  }
}
相关推荐
bitbitDown28 分钟前
我用Playwright爬了掘金热榜,发现了这些有趣的秘密... 🕵️‍♂️
前端·javascript·vue.js
markyankee10134 分钟前
Vue 表单输入绑定终极指南:从基础到企业级实践
vue.js
借月39 分钟前
🎯 用 Vue + SVG 实现一个「蛇形时间轴」组件,打造高颜值事件流程图
vue.js
tianchang40 分钟前
SSR 深度解析:从原理到实践的完整指南
前端·vue.js·设计模式
Georgewu1 小时前
【HarmonyOS 5】鸿蒙中自定义弹框OpenCustomDialog、CustomDialog与DialogHub的区别详解
harmonyos
塞尔维亚大汉1 小时前
鸿蒙内核源码分析(消息封装篇) | 剖析LiteIpc 进程通讯内容
harmonyos·源码阅读
Georgewu1 小时前
【HarmonyOS NEXT】鸿蒙跳转华为应用市场目标APP下载页
harmonyos
小杜不是小杜2 小时前
qiankun:vue3+webpack 微前端搭建
前端·vue.js
怪大叔95272 小时前
eslint9.0之后如何安装新版本eslint+prettier规范
前端·vue.js·代码规范
好柿会發生2 小时前
markdown 渲染自定义组件
vue.js·markdown