Swiper：
1. Swiper作用及其描述：
Swiper组件提供滑动轮播显示的能力。
Swiper本身是一个容器组件，当设置了多个组件后，可以对这些子组件进行轮播显示。
2. Swiper基本用法：
将需要轮播显示的内容写入Swiper容器里即可。
设置 Swiper 的尺寸：内容会拉伸为和 Swiper 一致（优先级高）；
设置内容尺寸：会将Swiper撑开；
下面是一个简单的案例显示：
@Entry
@Component
struct Index {
build() {
Column(){
Swiper(){
// 可以放任何组件，如果放了多个组件，则这些组件会被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%')
.backgroundColor('rgba(0,0,0,0.3)')
}
}
该案例效果图如下：
3. Swiper的常用属性：
.loop 布尔值 是否开启循环 true/false 默认值：true
.autoPlay 布尔值 子组件是否自动播放 true/false 默认值：false
.vertical 布尔值 是否为纵向滑动 true/false 默认值：false
.interval 数字类型 使用自动播放时播放的时间间隔，单位为毫秒。
使用方式代码段如下：
Swiper(){
}
// 自动轮播：true，手动轮播：false
.autoPlay(true)
// 默认3000毫秒=3秒,设置其为1秒
.interval(1000)
// loop： true:是让swiper内部组件一遍遍轮播，false:只播一次
.loop(true)
// .vertical(true) 轮播图组件纵向滚动
// .indicator(false) 是否显示圆点指示器，false:不显示 true:显示，默认
4. 调整Swiper的导航点：
何为导航点？
如图红色区域：
Swiper的导航点的调整可以分为两类：显示和隐藏。
Swiper的导航点可以设置为两种样式：圆点样式和数字样式。
调整导航点要用到其属性：
.indicator 设置导航点指示器样式 :
-
DotIndicator：圆点指示器样式。
-
DigitIndicator：数字指示器样式。
-
boolean：是否启用导航点指示器。
默认值：true
默认类型：DotIndicator
我们也可以调整导航点的位置：
左：.left 上：.top 右：.right 下： .bottom
使用方式代码段如下：
Swiper(){
}
.indicator(
// 设置为圆点指示器，dot()为圆点指示器，digit()数字指示器
DotIndicator.dot()
// 设置选中点宽度
.selectedItemWidth(20)
// 设置未选中点颜色
.color(Color.Yellow)
// 设置选中点颜色
.selectedColor(Color.Black)
// .left(10) 设置指示器离组件的距离
// .top(10)
)
Swiper的常见样式还有很多：（更多属性请查阅官方文档）
| 参数名 | 参数类型 | 必填项 | 参数描述 |
|---|---|---|---|
| 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' |
5. 拓展：Swiper的页面切换方式
通过控制器控制页面切换
核心步骤 ：
- 实例化控制器
- 设置给 Swiper
- 调用控制器方法
SwiperController对象核心方法：
showNext(): void：翻至下一页。翻页带动效切换过程，翻页时长可以通过Swiper组件duration和curve指定。
showPrevious(): void：翻至上一页。翻页带动效切换过程，翻页时长可以通过Swiper组件duration和curve指定。
使用方式代码段如下：
@Entry
@Component
struct SwiperDemo {
// 1.创建控制器对象，用来手动控制轮播图滚动
controller=new SwiperController()
build() {
Column({ space: 10 }) {
// 2. 设置给 Swiper
Swiper(this.controller) {
// 略
}
// 2个按钮控制轮播图滚动
Row(){
Button('上一页')
.onClick(()=>{
// 设置控制器切换到上一页
this.controller.showPrevious()
})
Button('下一页')
.onClick(()=>{
// 设置控制器切换到下一页
this.controller.showNext()
})
}
}
.width('100%')
.height('100%')
}
}
最后来个小小的案例实现：
核心代码：
// 淘宝案例
// 手动轮播图滚动
Swiper(this.controller){
Image($r('app.media.ic_swiper_tb01'))
Image($r('app.media.ic_swiper_tb02'))
Image($r('app.media.ic_swiper_tb03'))
Image($r('app.media.ic_swiper_tb04'))
}
.loop(true)
// .autoPlay(true)
.interval(4000)
.width(171)
.height(250)
.borderRadius(10)
.indicator(DotIndicator.dot()
.selectedColor(Color.Orange)
.itemWidth(6)
.itemHeight(6))
// 2个按钮控制轮播图滚动
Row(){
Button('上一页')
.onClick(()=>{
// 设置控制器切换到上一页
this.controller.showPrevious()
})
Button('下一页')
.onClick(()=>{
// 设置控制器切换到下一页
this.controller.showNext()
})
}
Row(){
Text('<')
.width(15)
// .textAlign(TextAlign.Center)
.borderRadius({topRight:8,bottomRight:8})
.backgroundColor('rgba(0,0,0,0.5)')
.onClick(()=>{
// 设置控制器切换到上一页
this.controller.showPrevious()
})
Text('>')
.width(15)
.textAlign(TextAlign.Center)
.borderRadius({topLeft:8,bottomLeft:8})
.backgroundColor('rgba(0,0,0,0.5)')
.onClick(()=>{
this.controller.showNext()
})
}
.width(171)
.justifyContent(FlexAlign.SpaceBetween)
.position({x:95,y:400})
