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

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

鸿蒙进阶篇-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组件的使用的内容就介绍到这里，愿您能学以致用，开发出精彩的鸿蒙应用！

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