鸿蒙进阶篇-Swiper组件的使用

“在科技的浪潮中,鸿蒙操作系统宛如一颗璀璨的新星,引领着创新的方向。作为鸿蒙开天组,今天我们将一同踏上鸿蒙基础的探索之旅,为您揭开这一神奇系统的神秘面纱。”

各位小伙伴们我们又见面了,我就是鸿蒙开天组,下面让我们进入今天的学习,

鸿蒙进阶篇-Swiper组件的使用
————————————————

1.使用场景

Swiper组件提供滑动轮播显示的能力。Swiper本身是一个容器组件,当设置了多个子组件后,可以对这些子组件进行轮播显示。通常,在一些应用首页显示推荐的内容时,需要用到轮播显示的能力,比如年轻人常用的哔哩哔哩首页:

2.基本用法

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

  1. 轮播内容:内容作为Swiper的子组件即可
  2. 尺寸:1)设置 Swiper 的尺寸:内容会拉伸为和 Swiper 一致(优先级高)2)设置内容尺寸:会将Swiper撑开
@Entry
@Component
struct Index {// Swiper 基本使用build() {Column() {Text('Swiper基本使用').fontSize(20).fontWeight(900).padding(10)Swiper() {Text('0').width('90%').height('100%').backgroundColor(Color.Gray).textAlign(TextAlign.Center).fontSize(30)Text('1').width('90%').height('100%').backgroundColor(Color.Green).textAlign(TextAlign.Center).fontSize(30)Text('2').width('90%').height('100%').backgroundColor(Color.Pink).textAlign(TextAlign.Center).fontSize(30)}.loop(true)}.width('100%').height('100%')}
}

3.常用属性

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

autoPlay

boolean

子组件是否自动播放。

默认值:false

说明:

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

interval

number

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

默认值:3000

vertical

boolean

是否为纵向滑动。

默认值:false

loop

boolean

是否开启无限循环播放。

设置为true时表示无限循环播放,设置为false时表示只播放一次。

默认值:true

利用上面几个属性,只要加上B站的图片,就大致上能实现B站首页的轮播图效果了,B站就是无限循环播放的,当然,还有一些细节需要进一步调整实现,比如导航点:

4.设置导航点

Swiper提供了默认的导航点样式和导航点箭头样式,导航点默认显示在Swiper下方居中位置,开发者也可以通过indicator属性自定义导航点的位置和样式,导航点箭头默认不显示。

通过indicator属性,开发者可以设置导航点相对于Swiper组件上下左右四个方位的位置,同时也可以设置每个导航点的尺寸、颜色、蒙层和被选中导航点的颜色。

indicator

DotIndicator

| DigitIndicator

| boolean

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

- DotIndicator:圆点指示器样式。

- DigitIndicator:数字指示器样式。

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

默认值:true

默认类型:DotIndicator

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

4.1位置属性:

参数名

参数类型

必填项

参数描述

left

Length

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

默认值:0

单位:vp

top

Length

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

默认值:0

单位:vp

right

Length

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

默认值:0

单位:vp

bottom

Length

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

默认值:0

单位:vp

4.2样式属性:

参数名

参数类型

必填项

参数描述

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 Index {build() {Column() {Text('Swiper案例-华为商城').fontSize(20).fontWeight(900).padding(10)Swiper() {Image('https://res.vmallres.com/uomcdn/CN/cms/202410/00cf6b02aacd4397968749ff39ae61db.jpg')Image('https://res.vmallres.com/uomcdn/CN/cms/202410/e9dc382b676348c593093e1f75053d45.jpg')Image('https://res.vmallres.com/uomcdn/CN/cms/202410/ff6a269fadff421da538ee5ee65c45ac.jpg')Image('https://res.vmallres.com/uomcdn/CN/cms/202410/3aba7d4d6ce14d45828e6a2dea221573.jpg')}.width('100%').height(160).indicator(Indicator.dot()// 圆形导航点.selectedColor(Color.Black)// 选中颜色.selectedItemWidth(10)// 选中宽度.selectedItemHeight(5)// 选中高度.itemWidth(5)// 默认宽度.itemHeight(5) // 默认高度)}.width('100%').height('100%')}
}

以上是关于鸿蒙进阶篇-Swiper组件的使用的一些内容,方便大家学习,至此,关于鸿蒙进阶篇-Swiper组件的使用的内容就介绍到这里,愿您能学以致用,开发出精彩的鸿蒙应用!

以上内容仅供学习交流,如有违法或者侵权可以联系删除。

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

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

相关文章

Ubuntu删除docker

文章目录 安装依赖1.安装操作系统:2.CPU支持 安装docker1.查看系统版本2.执行卸载 安装依赖 1.安装操作系统: 高于 Ubuntu 20.04(LTS) 版本 2.CPU支持 ARM和X86_64 安装docker 1.查看系统版本 cat /etc/*releas*uname -a2.执行卸载 检查本地dock…

【机器学习】23. 聚类-GMM: Gaussian Mixture Model

1. 定义和假设 定义:probabilistic clustering(model-base) 假设:数据服从正态分布 2. 算法内容 我们假设数据是由k个高斯(正态)分布混合生成的。每个分布有2个参数:μ和σ。 一个分布对应一…

【系统设计】深入理解HTTP缓存机制:从Read-Through缓存到HTTP缓存的交互流程

在现代Web开发中,缓存机制扮演着至关重要的角色。它不仅提升了用户体验,还极大地优化了资源的使用效率。在这篇博文中,我们将从“Read-Through”缓存的概念出发,深入探讨HTTP缓存的工作原理和交互流程,并详细描述max-a…

四款主流的3D创作和游戏开发软件的核心特点和关系

四款主流的3D创作和游戏开发软件的核心特点和关系 3D建模软件: Blender: 开源免费,功能全面优点: 完全免费持续更新优化社区活跃,学习资源丰富功能全面(建模、动画、渲染等) 缺点: 学习曲线陡峭界面操作…

Spring Cloud Ribbon:负载均衡的服务调用

Spring Cloud Ribbon:负载均衡的服务调用 Spring Cloud Ribbon 是Spring Cloud Netflix 子项目的核心组件之一,主要给服务间调用及API网关转发提供负载均衡的功能,本文将对其用法进行详细介绍 Ribbon简介 Ribbon 是 Netflix 公司开源的一个用…

Python中模块与包

1. 模块 在Python中,模块是一个包含Python代码的文件,可以包含函数、类和变量。模块使得代码的组织和复用变得更简单。 导入模块 使用import语句可以导入模块。常用的标准库模块包括math和random。 示例:使用math和random模块 import ma…

Node.js:Express 服务 路由

Node.js:Express 服务 & 路由 创建服务处理请求req对象 静态资源托管托管多个资源挂载路径前缀 路由模块化 Express是Node.js上的一个第三方框架,可以快速开发一个web框架。本质是一个包,可以通过npm直接下载。 创建服务 Express创建一…

TensorRT-LLM的k8s弹性伸缩部署方案

Scaling LLMs with NVIDIA Triton and NVIDIA TensorRT-LLM Using Kubernetes | NVIDIA Technical Blog 一共涉及4个k8s组件: 1. Deployment:跑起来N个pod;指定NVIDIA官方的triton&trt-llm的docker image,指定好model放在哪个…

运维监控丨16条常用的Kafka看板监控配置与告警规则

本期我们针对企业运维监控的场景,介绍一些监控配置和告警规则。可以根据Kafka集群和业务的具体要求,灵活调整和扩展这些监控配置及告警规则。在实际应用场景中,需要综合运用多种监控工具(例如Prometheus、Grafana、Zabbix等&#…

《基于数据库数据的迁移学习应用》

《基于数据库数据的迁移学习应用》 一、引言二、迁移学习概述(一)迁移学习的定义和原理(二)迁移学习的分类(三)迁移学习的优势 三、数据库的类型与特点(一)关系型数据库(…

Dockerfile制作Oracle19c镜像

Dockerfile文件 cat > Dockerfile << EOF # 使用 Oracle Linux 8 作为基础镜像 FROM oraclelinux:8# 复制 Oracle 19c 安装包 COPY oracle-database-ee-19c-1.0-1.x86_64.rpm /tmp/# 安装 Oracle 19c 数据库和依赖 RUN yum localinstall -y /tmp/oracle-database-ee-…

6.0、静态路由

路由器最主要的功能就是转发数据包。路由器转发数据包时需要查找路由表&#xff08;你可以理解为地图&#xff09;&#xff0c;管理员可以直接手动配置路由表&#xff0c;这就是静态路由。 1.什么是路由&#xff1f; 在网络世界中&#xff0c;路由是指数据包在网络中的传输路…

Java如何实现企业微信审批流程

大家好&#xff0c;我是 V 哥。最近的一个项目中&#xff0c;用到企业微信的审批流程&#xff0c;整理出来分享给大家。在企业微信中实现审批流程可以通过调用企业微信的开放API完成&#xff0c;企业微信提供了审批应用接口&#xff0c;用于创建审批模板、发起审批流程以及获取…

4. 类和对象(下)

1. 初始化列表 • 之前我们实现构造函数时&#xff0c;初始化成员变量主要使⽤函数体内赋值&#xff0c;构造函数初始化还有⼀种⽅ 式&#xff0c;就是初始化列表&#xff0c;初始化列表的使⽤⽅式是以⼀个冒号开始&#xff0c;接着是⼀个以逗号分隔的数据成 员列表&#xff0c…

AI驱动的医疗创新:信息抽取与知识图谱在临床应用中的转变

一、思通数科平台支持多种输入格式&#xff0c;如电子病历、临床数据和医学文献等&#xff0c;并能将这些信息快速转换为结构化数据&#xff0c;包括自动360度不同角度的旋转识别&#xff0c;提升数据的可操作性和可检索性。通过我们的解决方案&#xff0c;医疗机构能够有效整合…

线程的joinable属性,以及主线程出现异常时,对其等待应该进行的处理

在C多线程编程中&#xff0c;线程的 joinable 属性是一个重要的概念&#xff0c;用于判断线程是否可以调用 join() 或 detach() 方法。当线程已经调用过 join() 或 detach() 之后&#xff0c;它将不再 joinable&#xff0c;此时调用 join() 或 detach() 会导致程序崩溃。 此外…

关注!这些型号SSD有Windows蓝屏问题需要修复

近期&#xff0c;在闪迪官方有一个SSD FW升级提醒&#xff0c;主要是为了解决Windows 11 24H2系统蓝屏的问题&#xff1a; Fix问题&#xff1a;这些SSD的主机内存缓冲区&#xff08;Host Memory Buffer&#xff0c;简称HMB&#xff09;功能可能会导致系统出现蓝屏死机&#xff…

Rust 力扣 - 1461. 检查一个字符串是否包含所有长度为 K 的二进制子串

文章目录 题目描述题解思路题解代码题目链接 题目描述 题解思路 长度为k的二进制子串所有取值的集合为[0, sum(k)]&#xff0c;其中sum(k)为1 2 4 … 1 << (k - 1) 我们只需要创建一个长度为sum(k) 1的数组 f &#xff0c;其中下标为 i 的元素用来标记字符串中子串…

xtu oj 连接字符串

文章目录 回顾思路代码 回顾 AB III问题 H: 三角数问题 G: 3个数等式 数组下标查询&#xff0c;降低时间复杂度1405 问题 E: 世界杯xtu 数码串xtu oj 神经网络xtu oj 1167 逆序数&#xff08;大数据&#xff09;xtu oj 原根xtu oj 不定方程的正整数解xtu oj 最多的可变换字符串…

如何编写STM32的定时器程序

编写STM32的定时器程序通常涉及以下步骤&#xff1a; 1. 选择定时器和时钟配置 首先&#xff0c;你需要选择一个可用的定时器&#xff08;TIM&#xff09;&#xff0c;并配置其时钟源。时钟源可以是内部时钟或外部时钟&#xff0c;通常通过RCC&#xff08;Reset and Clock Con…