第一章
1.Swiper
1.1Swiper基础简介
Swiper本身是一个容器组件，可以有多个子组件，主要用于轮播图的转换，如图所示：
1.2Swiper写作格式
Swiper(){
//主要写要播放的内容（大多播放的是图片）
}
//设置轮播图的宽高
1.3Swiper的常用属性
.autoPlay()（用于轮播图的自动播放，true表示自动播放，false表示不自动播放）
.loop()（用于轮播图是否循环播放，true表示循环播放，false表示不循环播放，一般默认为false）
interval()（控制轮播图变换的时间间隔单位为毫秒）
vertical()（控制轮播图纵向和横向播放，false为横向，true为纵向，一般默认为false
1.4导航点的设置
indicator()（用于对导航点的设置）:
indicator()的格式
indicator(
//选择导航点的样式（如果是数字式的写DotIndicator.digit()；如果是圆点指示器式的写DotIndicator.dot()
DotIndicator.dot()
//对导航点宽高颜色等的设置
.itemWidth()
)
indicator的常用属性
itemWidth()（控制未被选中的导航点的宽）itemHeight()（控制未被选中的导航点的高)
selectedItemWidth()（控制被选中的导航点的宽）selectedItemHeight()（控制被选中的导航点的高)
color()（控制未被选中的导航点的颜色）selectedColor()（控制被选中的导航点的颜色）
left(),bottom()，right()，top()（控制导航点距离上下左右的距离）
Swiper() {
Image('https://m.ykimg.com/054101015C32BF1FADCA61A23BA57298')
.height(700)
.align(Alignment.Bottom)
.objectFit(ImageFit.Fill)
Image('https://i2.hdslb.com/bfs/archive/bfe327522a96e3cf1c541d4a1ed83a6ba0a9ac50.jpg')
.height(700)
.align(Alignment.Bottom)
.objectFit(ImageFit.Fill)
Image('https://iknowpic.cdn.bcebos.com/c2cec3fdfc0392456cbdd7729794a4c27d1e2546')
.height(700)
.align(Alignment.Bottom)
.objectFit(ImageFit.Fill)
}
.interval(3000)
.autoPlay(true)
.vertical(true)
.indicator(
Indicator.dot()
.itemWidth(30)
.itemHeight(10)
.color('black')
.selectedItemWidth(30)
.selectedColor('red')
1.5Swiper实例化页面切换
实现步骤
1.设置实例化控制器
2.设置给Swiper
3.调用控制器方法
页面切换的方法
showNext()（切换到下一页）
showPrevious()（切换到上一页）
controller = new SwiperController()
Stack() {
Swiper(this.controller) {
Image($r('app.media.ic_swiper_xmyp01'))
.imageStyle('第一幅')
Image($r('app.media.ic_swiper_xmyp02'))
.imageStyle('第二幅')
Image($r('app.media.ic_swiper_xmyp03'))
.imageStyle('第三幅')
Image($r('app.media.ic_swiper_xmyp04'))
.imageStyle('第四幅')
}
.width('100%')
.height(160)
.interval(4000)
.indicator(
DotIndicator.dot()
.selectedColor('#fff')
.selectedItemWidth(30)
.selectedItemHeight(4)
.itemWidth(10)
.itemHeight(4)
.color('#ccc')
)
Row() {
Text('上一页')
.fontWeight(700)
.fontColor('red')
.onClick(() => {
this.controller.showPrevious()
})
Text('下一页')
.fontWeight(700)
.fontColor('red')
.onClick(() => {
this.controller.showNext()
})
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
}
.width('100%')
.height(160)
