鸿蒙学习-ArkTs中不那么基础的组件Swiper

简介

滑块视图容器，提供子组件滑动轮播显示的能力。

scss 复制代码

Swiper(controller?: SwiperController)

可以包含子组件。

子组件类型：系统组件和自定义组件，不支持渲染控制类型（if/else、ForEach和LazyForEach）。

从简介可以看出，这个组件的作用主要就是写一些轮播图之类的，那么像我们上一篇说的app的引导页也是可以用这个来写的。

下面我们看下相关参数以及属性都有哪些。

参数

参数名	参数类型	必填	参数描述
controller	SwiperController	否	给组件绑定一个控制器，用来控制组件翻页。

SwiperController可以自定义属性

属性

以下是除通用属性外的其他属性，基本上是很详细的需要的属性都用，除非特殊需求基本不用自定义。

名称	参数类型	描述	说明
index	number	设置当前在容器中显示的子组件的索引值。默认值：0。	设置小于0或大于等于子组件数量时，按照默认值0处理。
autoPlay	boolean	子组件是否自动播放。默认值：false。	loop为false时，自动轮播到最后一页时停止轮播。手势切换后不是最后一页时继续播放。
interval	number	使用自动播放时播放的时间间隔，单位为毫秒。默认值：3000
indicator	boolean	是否启用导航点指示器。默认值：true
loop	boolean	是否开启循环。设置为true时表示开启循环，在LazyForEach懒循环加载模式下，加载的组件数量建议大于5个。默认值：true
duration	number	子组件切换的动画时长，单位为毫秒。默认值：400
vertical	boolean	是否为纵向滑动。默认值：false
itemSpace	number / string	设置子组件与子组件之间间隙。默认值：0	不支持设置百分比。
displayMode	SwiperDisplayMode	主轴方向上元素排列的模式，优先以displayCount设置的个数显示，displayCount未设置时本属性生效。默认值：SwiperDisplayMode.Stretch
cachedCount8+	number	设置预加载子组件个数。默认值：1
disableSwipe8+	boolean	禁用组件滑动切换功能。默认值：false
curve8+	Curve / string	设置Swiper的动画曲线，默认为淡入淡出曲线，也可以通过插值计算模块提供的接口创建自定义的插值曲线对象。默认值：Curve.Ease
indicatorStyle8+	{left?: Length,top?: Length,right?: Length,bottom?: Length,size?: Length,mask?: boolean,color?: ResourceColor,selectedColor?: ResourceColor}	设置导航点样式：- left: 设置导航点距离Swiper组件左边的距离。- top: 设置导航点距离Swiper组件顶部的距离。- right: 设置导航点距离Swiper组件右边的距离。- bottom: 设置导航点距离Swiper组件底部的距离。- size: 设置导航点的直径。- mask: 设置是否显示导航点蒙层样式。- color: 设置导航点的颜色。- selectedColor: 设置选中的导航点的颜色。
displayCount8+	number / string	设置一页内元素显示个数。默认值：1	字符串类型仅支持设置为'auto'，显示效果同SwiperDisplayMode.AutoLinear。使用number类型时，子组件按照主轴均分Swiper宽度（减去displayCount-1的itemSpace）的方式进行主轴拉伸（收缩）布局。
effectMode8+	EdgeEffect	滑动效果，目前支持的滑动效果参见EdgeEffect的枚举说明。默认值：EdgeEffect.Spring	控制器接口调用时不生效回弹。

这些属性中前面一部分基本属于我们都会用到的，但是后面几个一般是用不到的，作为了解就行。

SwiperDisplayMode枚举说明

名称	描述
Stretch	Swiper滑动一页的宽度为Swiper组件自身的宽度。
AutoLinear	Swiper滑动一页的宽度为子组件宽度中的最大值。

SwiperController

Swiper容器组件的控制器，可以将此对象绑定至Swiper组件，然后通过它控制翻页。

showNext

showNext(): void

翻至下一页。翻页带动效切换过程，时长通过duration指定。

showPrevious

showPrevious(): void

翻至上一页。翻页带动效切换过程，时长通过duration指定。

finishAnimation

finishAnimation(callback?: () => void): void

停止播放动画。

参数：

参数名	参数类型	必填项	参数描述
callback	() => void	否	动画结束的回调。

事件

除支持通用事件外，还支持以下事件：

名称	功能描述
onChange(event: (index: number) => void)	当前显示的子组件索引变化时触发该事件,返回值为当前显示的子组件的索引值。- index:当前显示元素的索引。说明：Swiper组件结合LazyForEach使用时，不能在onChange事件里触发子页面UI的刷新。
onAnimationStart9+(event: (index: number) => void)	切换动画开始时触发该回调。- index:当前显示元素的索引。说明：参数为动画开始前的index值（不是最终结束动画的index值），多列Swiper时，index为最左侧组件的索引。
onAnimationEnd9+(event: (index: number) => void)	切换动画结束时触发该回调。- index:当前显示元素的索引。说明：当Swiper切换动效结束时触发，包括动画过程中手势中断，通过SwiperController调用finishAnimatio。参数为动画结束后的index值，多列Swiper时，index为最左侧组件的索引。

onChange

onChange(event: (index: number) => void)

当前显示的子组件索引变化时触发该事件,返回值为当前显示的子组件的索引值。

说明：Swiper组件结合LazyForEach使用时，不能在onChange事件里触发子页面UI的刷新。

返回值：

名称	类型	参数描述
index	number	当前显示元素的索引。

实际使用

场景：我们就用上一篇结尾的app的初次下载介绍或新功能引导页为例。

我这里设置的是倒计时共6秒，每两秒自动换下一页，倒计时结束跳转到首页。当然我们也可以设置手动滑动页面。

下面看代码：

scss 复制代码

Swiper(this.swiperController){
  ForEach(this.data,(item: Resource) => {
    Column(){
      Image($r('app.media.ic_splash'))
        .height('400vp')
        .objectFit(ImageFit.Contain)
    }
    .width('100%')
    .height('100%')
    .backgroundColor(item)
    .justifyContent(FlexAlign.Center)
  })
}
.loop(false)//是否开启循环
.interval(2 * Const.DURATION)//自动播放时的时间间隔
.duration(Const.DURATION)//切换时的动画时长
.autoPlay(true)//是否自动播放
.curve(Curve.Linear)//动画曲线，默认是淡入淡出
.onChange((index: number) => {
  console.info(index.toString())
})
.indicator(false)//是否启用导航点指示器

这就是轮播页面的主要代码，相关属性我也在后面进行了注释，右上角的跳过按钮看上篇文章。

下面我们看一下其他的比如controller、数据等：

首先controller我们是需要进行初始化的：

ini 复制代码

private swiperController: SwiperController = new SwiperController();

我们需要配合ForEach进行使用，数据我们之前已经设置好就是其中的Resource。

css 复制代码

//数据类
interface ISplash{
  color: Resource[];
}

export const splashColors: ISplash = {
  color: [
    $r('app.color.splash1'),
    $r('app.color.splash2'),
    $r('app.color.splash3')
  ]
}

kotlin 复制代码

//导入数据类
import { splashColors } from '../viewmodel/SplashModel';

@Entry
@Component
struct Splash {
  //controller
  private swiperController: SwiperController = new SwiperController();
  //data
  private data: Resource[] = [];

  aboutToAppear(): void{
    //data附值
    this.data = splashColors.color;
  }
}

其中aboutToAppear()是鸿蒙页面的生命周期，类似于android的onstart()。

以上是一个自动轮播的引导页实例，如果需要不自动轮播，点击相关按钮进入下一页或上一页的话可以使用showNext()、showPrevious()。

具体使用方法为在相关按钮的点击事件内添加如下代码：

kotlin 复制代码

this.swiperController.showNext()
this.swiperController.showPrevious()

以上就是Swiper轮播组件的具体使用，如有错误的地方欢迎大家指正，共同进步。下一篇我们来一起学习下app页面的切换组件Tab。