Swiper、样式结构重用、GridGridItem

今日核心：

  1. 容器组件：Swiper、Grid\GridItem
  2. 样式&结构重用：@Builder、@Extend、@Styles

相关资源:

  1. 图片素材：📎day01.zip

1. Swiper

1.1. 适用场景

首先来看看 Swiper 在什么情况下会用到

链接

Swiper组件提供滑动轮播显示的能力。Swiper本身是一个容器组件，当设置了多个子组件后，可以对这些子组件进行轮播显示，比如：

1.2. 基本用法

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

  1. 轮播内容：内容作为Swiper的子组件即可
  2. 尺寸：
    1. 设置 Swiper 的尺寸：内容会拉伸为和 Swiper 一致（优先级高）
    2. 设置内容尺寸：会将Swiper撑开
Swiper() {// 轮播内容 // (设置尺寸，撑开swiper)
}
// 设置尺寸（内容拉伸、优先级高）
.width('100%')
.height(100)

实现一个数字轮播的效果:

参考代码：

@Entry
@Component
struct Page01_Swiper {// 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. 常用属性

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

loop

boolean

是否开启循环。

设置为true时表示开启循环，在LazyForEach懒循环加载模式下，加载的组件数量建议大于5个。

默认值：true

autoPlay

boolean

子组件是否自动播放。

默认值：false

说明：

loop为false时，自动轮播到最后一页时停止轮播。手势切换后不是最后一页时继续播放。

interval

number

使用自动播放时播放的时间间隔，单位为毫秒。

默认值：3000

vertical

boolean

是否为纵向滑动。

默认值：false

更多属性参考文档。。。。。

使用上述属性，将轮播图调整为：

  1. 自动播放
  2. 播放间隔：4 秒钟
  3. 纵向滑动

基础模版

@Entry
@Component
struct Page02_SwiperAttribute {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%')}
}

参考代码：

@Entry
@Component
struct Page02_SwiperAttribute {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(160).loop(false) // 是否开启循环 true/false.autoPlay(true) // 是否自动播放 true/false.interval(4000) // 自动播放时间间隔 单位毫秒.vertical(true) // 是否纵向滑动}.width('100%').height('100%')}
}

1.4. 调整导航点

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

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

  1. 显示 or 隐藏
  2. 导航点类型：
    1. 圆点（掌握）
    2. 数字（了解）

indicator

DotIndicator

| DigitIndicator

| boolean

设置可选导航点指示器样式。

- DotIndicator：圆点指示器样式。

- DigitIndicator：数字指示器样式。

- boolean：是否启用导航点指示器。

默认值：true

默认类型：DotIndicator

Swiper(){// 略
}
// .indicator(false) // 关闭导航
// .indicator(Indicator.dot()) // 圆点指示器（默认）
// .indicator(Indicator.digit()) // 数字指示器

日常开发中 较为常见的是圆点指示器，咱们重点掌握如何调整他即可

Swiper(){// 略
}.indicator(Indicator.dot()// .xxx(设置圆点指示器的属性)) // 圆点指示器（默认）

位置属性：

参数名

参数类型

必填项

参数描述

left

Length

否

设置导航点距离Swiper组件左边的距离。

默认值：0

单位：vp

top

Length

否

设置导航点距离Swiper组件顶部的距离。

默认值：0

单位：vp

right

Length

否

设置导航点距离Swiper组件右边的距离。

默认值：0

单位：vp

bottom

Length

否

设置导航点距离Swiper组件底部的距离。

默认值：0

单位：vp

样式属性：

参数名

参数类型

必填项

参数描述

itemWidth

Length

否

设置Swiper组件圆点导航指示器的宽，不支持设置百分比。

默认值：6

单位：vp

itemHeight

Length

否

设置Swiper组件圆点导航指示器的高，不支持设置百分比。

默认值：6

单位：vp

selectedItemWidth

Length

否

设置选中Swiper组件圆点导航指示器的宽，不支持设置百分比。

默认值：12

单位：vp

selectedItemHeight

Length

否

设置选中Swiper组件圆点导航指示器的高，不支持设置百分比。

默认值：6

单位：vp

color

ResourceColor

否

设置Swiper组件圆点导航指示器的颜色。

默认值：'#182431'（10%透明度）

selectedColor

ResourceColor

否

设置选中Swiper组件圆点导航指示器的颜色。

默认值：'#007DFF'

更多属性参考文档。。。。。

基础模版

@Entry
@Component
struct Page03_SwiperIndicator {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(160)}.width('100%').height('100%')}
}

参考代码：

@Entry
@Component
struct Page03_SwiperIndicator {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(160)// .indicator(false) // 关闭导航点// .indicator(Indicator.digit()) // 数字导航点.indicator(Indicator.dot().left(10)// 左侧距离.top(10)// 顶部距离.bottom(10)// 底部距离.right(10)// 右侧距离（距离属性组合使用，无需全部设置）.itemWidth(20)// 指示器宽度.itemHeight(20)// 指示器高度.selectedItemWidth(30)// 选中指示器宽度.selectedItemHeight(30)// 选中指示器高度.selectedColor(Color.Yellow)// 选中指示器颜色.color(Color.Blue) // 默认指示器宽度) // 圆形导航点}.width('100%').height('100%')}
}

1.5. 案例-小米有品

通过刚刚学习的内容，咱们来完成小米有品首页的轮播效果

关键信息:

  1. 宽高：100%、160
  2. 循环、自动轮播，间隔 4000
  3. 圆点指示器：
    1. 选中颜色：白色
    2. 选中宽高：30、4
    3. 默认宽高：10、4

基础模版：

@Entry
@Component
struct Page04_SwiperDemo_xiaomi {build() {Column() {Text('Swiper案例-小米').fontSize(20).fontWeight(900).padding(10)Swiper() {Image($r('app.media.ic_swiper_xmyp01'))Image($r('app.media.ic_swiper_xmyp02'))Image($r('app.media.ic_swiper_xmyp03'))Image($r('app.media.ic_swiper_xmyp04'))}}.width('100%').height('100%')}
}

参考代码：

@Entry
@Component
struct Page04_SwiperDemo_xiaomi {build() {Column() {Text('Swiper案例-小米').fontSize(20).fontWeight(900).padding(10)Swiper() {Image($r('app.media.ic_swiper_xmyp01'))Image($r('app.media.ic_swiper_xmyp02'))Image($r('app.media.ic_swiper_xmyp03'))Image($r('app.media.ic_swiper_xmyp04'))}.width('100%').height(160).indicator(Indicator.dot()// 圆形导航点.selectedColor(Color.White)// 选中颜色.selectedItemWidth(30)// 选中宽度.selectedItemHeight(4)// 选中高度.itemWidth(10)// 默认宽度.itemHeight(4) // 默认高度)}.width('100%').height('100%')}
}

2. 样式&结构重用

随着页面复杂程度提高，页面中会有很多的样式&结构代码，其中难免重复的部分，如果可以提取出来重复使用，就可以提升编码效率，减少重复代码，提升代码可读性。

咱们来来学习3 种样式&结构复用的语法：

  1. @Styles: 抽取公共样式、事件
  2. @Extends：扩展组件样式、事件
  3. @Builder：轻量级的元素复用机制（结构、样式、事件）- 重点掌握

2.1. @Styles

@Styles 可以抽取 通用的事件和属性，比如:

链接

Text(this.message).width(100).height(100).backgroundColor(this.bgColor).onClick(() => {this.bgColor = Color.Orange})Column() {
}
.width(100)
.height(100)
.backgroundColor(this.bgColor)
.onClick(() => {this.bgColor = Color.Orange
})Button('按钮').width(100).height(100).backgroundColor(this.bgColor).onClick(() => {this.bgColor = Color.Orange})
Text(this.message).sizeAndColorFancy()Column() {
}
.sizeAndColorFancy()Button('按钮').sizeAndColorFancy()

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/77909.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

前沿分享｜技术雷达202504月刊精华

前沿分享｜技术雷达202504月刊精华

本期雷达 ###技术部分 7. GraphRAG 试验 在上次关于 检索增强生成（RAG）的更新中，我们已经介绍了GraphRAG。它最初在微软的文章中被描述为一个两步的流程： （1）对文档进行分块，并使用基于大语言…
阅读更多...
数据结构与算法-顺序表应用

数据结构与算法-顺序表应用

一.通讯录的创建 首先我们要理解的是通讯录本身就是以顺序表为底层的 只不过顺序表中的数组，这里我们是用结构体来替代，用来存储用户的信息 由于是通讯录的本质就是顺序表，所以顺序表的任何方法它都能套用 Contact.h: #pragma once #def…
阅读更多...
【C++】新手入门指南（下）

【C++】新手入门指南（下）

文章目录 前言 一、引用 1.引用的概念和定义 2.引用的特性 3.引用的使用 4.const引用 5.指针和引用的关系 二、内联函数 三、nullptr 总结 前言 这篇续上篇的内容新手入门指南（上），继续带大家学习新知识。如果你感兴趣欢迎订购本专栏。 一、…
阅读更多...
uniapp-商城-33-shop 布局搜索页面以及u-search

uniapp-商城-33-shop 布局搜索页面以及u-search

shop页面上有一个搜索&#xff0c;可以进行商品搜索&#xff0c;这里我们先做一个页面布局&#xff0c;后面再来进行数据i联动。 1、shop页面的搜索 2、搜索的页面代码 <navigator class"searchView" url"/pagesub/pageshop/search/search"> …
阅读更多...
SAP 采购订单如何防止开票数量 大于 收货数量呢

SAP 采购订单如何防止开票数量 大于 收货数量呢

配置点如下&#xff1a; 事务码&#xff1a;OMRM&#xff0c;配置如下 当过账开票的数量 大于收货数量的时候会提示如下&#xff1a;
阅读更多...
Kotlin 的 suspend 关键字

Kotlin 的 suspend 关键字

更多相关知识 Kotlin 的 suspend 关键字是 Kotlin 协程的核心组成部分&#xff0c;它用于标记一个函数可以被挂起&#xff08;暂停执行&#xff09;并在稍后恢复执行&#xff0c;而不会阻塞线程。 理解 suspend 的作用需要从以下几个方面入手&#xff1a; 1. 允许非阻塞的异步…
阅读更多...
UDS诊断协议iso-14229 15765

UDS诊断协议iso-14229 15765

Diagnostic request 形式多种： 1.SID+DID 2.SID+Sub-Func+DID 3.SID+Sub-Func SID占1个Byte，Sub-func占一个Byte，DID通常两个Byte eg.10 01 (SID+Sub-Func) 10 03 05 02 (SID+Sub-Func+DID) 22 02 00 (SID+DID) 肯定响应抑制位 抑制正响应信息除非是收到NRC 0x78的情况下 不…
阅读更多...
记录一次使用面向对象的C语言封装步进电机驱动

记录一次使用面向对象的C语言封装步进电机驱动

简介 (2025/4/21) 本库对目前仅针对TB6600驱动下的42步进电机的基础功能进行了一定的封装, 也是我初次尝试以面向对象的思想去编写嵌入式代码, 和直流电机的驱动步骤相似在调用stepmotor_attach()函数和stepmotor_init()函数之后仅通过结构体数组stepm然后指定枚举变量中的id即…
阅读更多...
[创业之路-376]：企业法务 - 创业，不同的企业形态，个人承担的风险、收益、税费、成本不同

[创业之路-376]：企业法务 - 创业，不同的企业形态，个人承担的风险、收益、税费、成本不同

在企业法务领域&#xff0c;创业时选择不同的企业形态&#xff0c;个人在风险承担、收益分配、税费负担及运营成本方面存在显著差异。以下从个人独资企业、合伙企业、有限责任公司、股份有限公司四种常见形态展开分析&#xff1a; 一、个人承担的风险 个人独资企业 风险类型&…
阅读更多...
GNOME桌面隐藏回收站和分区

GNOME桌面隐藏回收站和分区

dconf-editor 搜索 trash&#xff0c;关闭 show-trash 搜索 volumes&#xff0c;关闭 show-volumns
阅读更多...
准确--Tomcat更换证书

准确--Tomcat更换证书

具体意思是&#xff1a; Starting Coyote HTTP/1.1 on http-8080: HTTP 连接器&#xff08;端口 8080&#xff09;启动成功了。严重: Failed to load keystore type PKCS12 with path conf/jlksearch.fzsmk.cn.pfx due to failed to decrypt safe contents entry: javax.crypt…
阅读更多...
禁止ubuntu自动更新

禁止ubuntu自动更新

由于ubuntu server和desktop版本都默认 启动了&#xff0c;自动更新内核的操作。这对于生 产环境来说是不友好的。容易导致亿赛通 无法启动 默认开启了内核自动更新所以我们关闭自 动内核更新。 1.禁止更新执行 sudo apt-mark hold linux-image-generic linux-headers-generic…
阅读更多...
vue3 + element-plus中el-drawer抽屉滚动条回到顶部

vue3 + element-plus中el-drawer抽屉滚动条回到顶部

el-drawer抽屉滚动条回到顶部 <script setup lang"ts" name"PerformanceLogQuery"> import { ref, nextTick } from "vue"; ...... // 详情 import { performanceLogQueryByIdService } from "/api/performanceLog"; const onD…
阅读更多...
【重走C++学习之路】16、AVL树

【重走C++学习之路】16、AVL树

目录 一、概念 二、AVL树的模拟实现 2.1 AVL树节点定义 2.2 AVL树的基本结构 2.3 AVL树的插入 1. 插入步骤 2. 调节平衡因子 3. 旋转处理 4. 开始插入 2.4 AVL树的查找 2.5 AVL树的删除 1. 删除步骤 2. 调节平衡因子 3. 旋转处理 4. 开始删除 结语 一、概念 …
阅读更多...
char32_t、char16_t、wchar_t 用于 c++ 语言里存储 unicode 编码的字符，给出它们的具体定义

char32_t、char16_t、wchar_t 用于 c++ 语言里存储 unicode 编码的字符，给出它们的具体定义

&#xff08;1&#xff09; #include <iostream> #include <string>int main() { std::u16string s u"C11 引入 char16_t"; // 定义 UTF-16 字符串for (char16_t c : s) // 遍历输出每个 char16_t 的值std::cout << std::hex << (…
阅读更多...
redis数据类型-基数统计HyperLogLog

redis数据类型-基数统计HyperLogLog

redis数据类型-基数统计HyperLogLog 文档 redis单机安装redis常用的五种数据类型redis数据类型-位图bitmap 说明 官网操作命令指南页面&#xff1a;https://redis.io/docs/latest/commands/?nameget&groupstringHyperLogLog介绍页面&#xff1a;https://redis.io/docs…
阅读更多...
逻辑思维：从混沌到秩序的理性推演在软件开发中的应用

逻辑思维：从混沌到秩序的理性推演在软件开发中的应用

引言 在软件开发的过程中&#xff0c;逻辑思维就像是开发者的“GPS导航”&#xff0c;帮助我们从混沌的需求中找到清晰的解决方案。想象一下&#xff0c;如果没有逻辑思维&#xff0c;我们可能会在需求的海洋中迷失方向&#xff0c;最终写出一堆“看似聪明但毫无意义”的代码。…
阅读更多...
Spring AI Alibaba Graph基于 ReAct Agent 的天气预报查询系统

Spring AI Alibaba Graph基于 ReAct Agent 的天气预报查询系统

1、在本示例中&#xff0c;我们仅为 Agent 绑定了一个天气查询服务&#xff0c;接收到用户的天气查询服务后&#xff0c;流程会在 AgentNode 和 ToolNode 之间循环执行&#xff0c;直到完成用户指令。示例中判断指令完成的条件&#xff08;即 ReAct 结束条件&#xff09;也很简…
阅读更多...
HCIP(综合实验2)

HCIP(综合实验2)

1.实验拓补图 2.实验要求 1.根据提供材料划分VLAN以及IP地址&#xff0c;PC1/PC2属于生产一部员工划分VLAN10,PC3属于生产二部划分VLAN20 2.HJ-1HJ-2交换机需要配置链路聚合以保证业务数据访问的高带宽需求 3.VLAN的放通遵循最小VLAN透传原则 4.配置MSTP生成树解决二层环路问题…
阅读更多...
使用 rebase 轻松管理主干分支

使用 rebase 轻松管理主干分支

前言 最近遇到一个技术团队的 dev 环境分支错乱&#xff0c;因为是多人合作大家各自提交信息&#xff0c;导致出现很多交叉合并记录&#xff0c;让对应 log 看起来非常混乱&#xff0c;难以阅读。 举例说明 假设我们有一个项目&#xff0c;最初develop分支有 3 个提交记录&a…
阅读更多...
最新文章

Copyright @ 2022~2023