1# Swiper 2滑动容器，提供切换子组件显示的能力。 3 4> **说明：** 5> 6> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 7 8 9## 子组件 10 11可以包含子组件。 12 13 14## 接口 15 16Swiper(controller?: SwiperController) 17 18**参数：** 19 20| 参数名 | 参数类型 | 必填 | 参数描述 | 21| ---------- | ------------------------------------- | ---- | -------------------- | 22| controller | [SwiperController](#swipercontroller) | 否 | 给组件绑定一个控制器，用来控制组件翻页。 | 23 24 25## 属性 26 27不支持[Menu控制](ts-universal-attributes-menu.md)。 28 29| 名称 | 参数类型 | 描述 | 30| --------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | 31| index | number | 设置当前在容器中显示的子组件的索引值。<br/>默认值：0 | 32| autoPlay | boolean | 子组件是否自动播放，自动播放状态下，导航点不可操作。<br/>默认值：false | 33| interval | number | 使用自动播放时播放的时间间隔，单位为毫秒。<br/>默认值：3000 | 34| indicator | boolean | 是否启用导航点指示器。<br/>默认值：true | 35| loop | boolean | 是否开启循环。<br> 设置为true时表示开启循环，在LazyForEach懒循环加载模式下，加载的组件数量建议大于5个。<br/>默认值：true | 36| duration | number | 子组件切换的动画时长，单位为毫秒。<br/>默认值：400 | 37| vertical | boolean | 是否为纵向滑动。<br/>默认值：false | 38| itemSpace | number \| string | 设置子组件与子组件之间间隙。<br/>默认值：0 | 39| displayMode | SwiperDisplayMode | 设置子组件显示模式。<br/>默认值：SwiperDisplayMode.Stretch | 40| cachedCount<sup>8+</sup> | number | 设置预加载子组件个数。<br/>默认值：1 | 41| disableSwipe<sup>8+</sup> | boolean | 禁用组件滑动切换功能。<br/>默认值：false | 42| displayCount<sup>8+</sup> | number \| string | 设置一页中显示子组件的个数，设置为“auto”时等同于SwiperDisplayMode.AutoLinear的显示效果。<br/>默认值：1 | 43| effectMode<sup>8+</sup> | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | 设置滑动到边缘时的显示效果。<br/>默认值：EdgeEffect.Spring | 44| curve<sup>8+</sup> | [Curve](ts-appendix-enums.md#curve) \| string | 设置Swiper的动画曲线，默认为淡入淡出曲线，常用曲线参考[Curve枚举说明](ts-appendix-enums.md#curve)，也可以通过插值计算模块提供的接口创建自定义的Curves([插值曲线对象](ts-interpolation-calculation.md))。<br/>默认值：Curve.Ease | 45| indicatorStyle<sup>8+</sup> | {<br/>left?: [Length](ts-types.md#length),<br/>top?: [Length](ts-types.md#length),<br/>right?: [Length](ts-types.md#length),<br/>bottom?: [Length](ts-types.md#length),<br/>size?: [Length](ts-types.md#length),<br/>mask?: boolean,<br/>color?: [ResourceColor](ts-types.md#resourcecolor8),<br/>selectedColor?: [ResourceColor](ts-types.md#resourcecolor8)<br/>} | 设置导航点样式：<br/>- left: 设置导航点距离Swiper组件左边的距离。<br/>- top: 设置导航点距离Swiper组件顶部的距离。<br/>- right: 设置导航点距离Swiper组件右边的距离。<br/>- bottom: 设置导航点距离Swiper组件底部的距离。<br/>- size: 设置导航点的直径。<br/>- mask: 设置是否显示导航点蒙层样式。<br/>- color: 设置导航点的颜色。<br/>- selectedColor: 设置选中的导航点的颜色。 | 46## SwiperDisplayMode枚举说明 47 48| 名称 | 描述 | 49| ----------- | ------------------------------------------ | 50| Stretch | Swiper滑动一页的宽度为Swiper组件自身的宽度。| 51| AutoLinear | Swiper滑动一页的宽度为子组件宽度中的最大值。| 52 53## EdgeEffect枚举说明 54 55| 名称 | 描述 | 56| ------ | ------------------------------------------------------------------------- | 57| Spring | 弹性物理动效，滑动到边缘后可以通过触摸事件继续滑动一段距离，松手后回弹。 | 58| Fade | 滑动到边缘后，可以通过触摸事件继续滑动一段阴影，松手后阴影回弹。 | 59| None | 滑动到边缘后无效果。 | 60 61## SwiperController 62 63Swiper容器组件的控制器，可以将此对象绑定至Swiper组件，然后通过它控制翻页。 64 65### showNext 66 67showNext(): void 68 69翻至下一页。 70 71### showPrevious 72 73showPrevious(): void 74 75翻至上一页。 76 77### finishAnimation 78 79finishAnimation(callback?: () => void): void 80 81停止播放动画。 82 83**参数：** 84 85| 参数名 | 参数类型 | 必填项 | 参数描述 | 86| --------- | ---------- | ------ | -------- | 87| callback | () => void | 是 | 动画结束的回调。 | 88 89## 事件 90 91### onChange 92 93onChange(event: (index: number) => void) 94 95当前显示的组件索引变化时触发该事件。 96 97**说明**：Swiper组件结合LazyForEach使用时，不能在onChange事件里触发子页面UI的刷新 98 99**参数：** 100 101| 参数名 | 参数类型 | 必填项 | 参数描述 | 102| --------- | ---------- | ------ | -------- | 103| index | number | 是 | 当前显示元素的索引。 | 104 105 106## 示例 107 108```ts 109// xxx.ets 110class MyDataSource implements IDataSource { 111 private list: number[] = [] 112 private listener: DataChangeListener 113 114 constructor(list: number[]) { 115 this.list = list 116 } 117 118 totalCount(): number { 119 return this.list.length 120 } 121 122 getData(index: number): any { 123 return this.list[index] 124 } 125 126 registerDataChangeListener(listener: DataChangeListener): void { 127 this.listener = listener 128 } 129 130 unregisterDataChangeListener() { 131 } 132} 133 134@Entry 135@Component 136struct SwiperExample { 137 private swiperController: SwiperController = new SwiperController() 138 private data: MyDataSource = new MyDataSource([]) 139 140 aboutToAppear(): void { 141 let list = [] 142 for (var i = 1; i <= 10; i++) { 143 list.push(i.toString()); 144 } 145 this.data = new MyDataSource(list) 146 } 147 148 build() { 149 Column({ space: 5 }) { 150 Swiper(this.swiperController) { 151 LazyForEach(this.data, (item: string) => { 152 Text(item).width('90%').height(160).backgroundColor(0xAFEEEE).textAlign(TextAlign.Center).fontSize(20) 153 }, item => item) 154 } 155 .cachedCount(2) 156 .index(1) 157 .autoPlay(true) 158 .interval(4000) 159 .indicator(true) // 默认开启指示点 160 .loop(false) // 默认开启循环播放 161 .duration(1000) 162 .vertical(false) // 默认横向切换 163 .itemSpace(0) 164 .curve(Curve.Linear) // 动画曲线 165 .onChange((index: number) => { 166 console.info(index.toString()) 167 }) 168 169 Flex({ justifyContent: FlexAlign.SpaceAround }) { 170 Button('next') 171 .onClick(() => { 172 this.swiperController.showNext() 173 }) 174 Button('preview') 175 .onClick(() => { 176 this.swiperController.showPrevious() 177 }) 178 } 179 }.margin({ top: 5 }) 180 } 181} 182``` 183 184 185
