《HarmonyOS应用开发基础》 课件知识点2-10 滑动视图容器组件Swiper

滑动视图容器组件SwiperSwiper概述滑块视图容器组件Swiper，提供子组件滑动轮播显示的能力。如右图所示。可以让子组件自动播放，也可以通过点击指示器或按钮切换子组件显示。接口描述：Swiper(controller?:SwiperController)Swiper的参数Swiper提供一个参数用于给组件绑定一个控制器SwiperController，该控制器用来控制组件翻页的，可以将此对象绑定至Swiper组件，然后通过它控制翻页。设置Swiper的参数为SwiperContorller对象：

private

swiperController:

SwiperController

=

new

SwiperController()

build()

{

Column()

{

Swiper(this.swiperController)

{

//省略子组件代码

}Swiper的参数控制器中提供两个翻页的方法：showNext()：控制器控制Swiper向后翻页。showPrevious()：控制器控制Swiper向前翻页。Button('上一页')

.onClick(()

=>

{

this.swiperController.showPrevious()

})Button('下一页')

.onClick(()

=>

{

this.swiperController.showNext()

})Swiper的属性通过设置Swiper的属性，可以指定默认显示第几个轮播页面，是否自动播放等。Swiper常用的属性：index：设置当前在容器中显示的子组件的索引值，默认值为0。autoPlay：子组件是否自动播放，自动播放状态下，导航点不可操作，默认值为false。interval：使用自动播放时播放的时间间隔，单位为毫秒，默认值3000。indicator：是否启用导航点指示器，默认值true。loop：是否开启循环。设置为true时表示开启循环。duration：子组件切换的动画时长，单位为毫秒。默认值为400。vertical：是否为纵向滑动。默认值：false。itemSpace：设置子组件与子组件之间间隙。默认值为0。curve：设置Swiper的动画曲线，默认为淡入淡出曲线。Swiper的属性Swiper()

{//省略了子组件}.index(1)//设置当前在容器中显示的为索引1的子组件.autoPlay(true)//设置开启自动播放.interval(4000)//设置播放的事件间隔为4000毫秒.indicator(true)//设置显示导航点指示器.loop(true)//设置开启循环播放.duration(1000)//设置切换的动画时长为1000毫秒.itemSpace(0)//设置子组件之间的间隙为0.curve(Curve.Linear)//设置Swiper的动画曲线为线性动画Swiper的事件当前显示的子组件索引变化时触发该事件会触发onChange事件，在onChange事件的回调方法中可以获取到当前页的下标。Swiper()

{//省略了子组件}