“在科技的浪潮中，鸿蒙操作系统宛如一颗璀璨的新星，引领着创新的方向。作为鸿蒙开天组，今天我们将一同踏上鸿蒙基础的探索之旅，为您揭开这一神奇系统的神秘面纱。”
各位小伙伴们我们又见面了,我就是鸿蒙开天组,下面让我们进入今天的学习,
鸿蒙进阶篇-Swiper组件的使用
————————————————
1.使用场景
Swiper组件提供滑动轮播显示的能力。Swiper本身是一个容器组件，当设置了多个子组件后，可以对这些子组件进行轮播显示。通常，在一些应用首页显示推荐的内容时，需要用到轮播显示的能力，比如年轻人常用的哔哩哔哩首页：
2.基本用法
首先来看看如何设置轮播内容，以及设置尺寸
- 轮播内容：内容作为Swiper的子组件即可
- 尺寸：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组件的使用的内容就介绍到这里，愿您能学以致用，开发出精彩的鸿蒙应用！
以上内容仅供学习交流，如有违法或者侵权可以联系删除。
