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

滑动视图容器组件Swiper

Swiper概述滑块视图容器组件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()?{//省略了子组件}//省略了属性.onChange((index:?number)?=?{??console.info(index.toString())})