1# Swiper 2 3 滑块视图容器，提供子组件滑动轮播显示的能力。 4 5> **说明：** 6> 7> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 子组件 11 12可以包含子组件。 13 14> **说明：** 15> 16> 子组件类型：系统组件和自定义组件，支持渲染控制类型（[if/else](../../../quick-start/arkts-rendering-control-ifelse.md)、[ForEach](../../../quick-start/arkts-rendering-control-foreach.md)和[LazyForEach](../../../quick-start/arkts-rendering-control-lazyforeach.md)）。 17> 18> Swiper子组件的visibility属性设置为None，Swiper的displayMode属性设置为SwiperDisplayMode.AutoLinear或displayCount属性设置为'auto'时，对应子组件在视窗内不占位，但不影响导航点个数。 19> 20> Swiper子组件的visibility属性设置为None，或者visibility属性设置为Hidden时，对应子组件不显示，但依然会在视窗内占位。 21> 22> 当Swiper子组件个数小于等于Swiper组件内容区内显示的节点总个数(totalDisplayCount = DisplayCount + prevMargin? (1 : 0 ) + nextMargin? (1 : 0 ))时，按照非循环模式布局处理，此时，前后边距对应子组件不显示，但依然会在视窗内占位。Swiper组件按照totalDisplayCount个数判断测算规格。 23> 24> 当Swiper子组件设置了offset属性时，会按照子组件的层级进行绘制，层级高的子组件会覆盖层级低的子组件。例如，Swiper包含3个子组件，其中第3个子组件设置了offset({ x : 100 })，那么在横向循环滑动中，第3个子组件会覆盖第1个子组件，此时可设置第1个子组件的zIndex属性值大于第3个子组件，使第1个子组件层级高于第3个子组件。 25 26 27## 接口 28 29Swiper(controller?: SwiperController) 30 31**参数：** 32 33| 参数名 | 参数类型 | 必填 | 参数描述 | 34| ---------- | ------------------------------------- | ---- | -------------------- | 35| controller | [SwiperController](#swipercontroller) | 否 | 给组件绑定一个控制器，用来控制组件翻页。 | 36 37 38## 属性 39 40除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性，不支持[Menu控制](ts-universal-attributes-menu.md)。 41 42| 名称 | 参数类型 | 描述 | 43| ------------------------------------- | ---------------------------------------- | ---------------------------------------- | 44| index | number | 设置当前在容器中显示的子组件的索引值。<br/>默认值：0<br/>**说明：** <br/>设置小于0或大于等于子组件数量时，按照默认值0处理。<br />从API version 10开始，该属性支持[$$](../../../quick-start/arkts-two-way-sync.md)双向绑定变量。 | 45| autoPlay | boolean | 子组件是否自动播放。<br/>默认值：false<br/>**说明：** <br/>loop为false时，自动轮播到最后一页时停止轮播。手势切换后不是最后一页时继续播放。 | 46| interval | number | 使用自动播放时播放的时间间隔，单位为毫秒。<br/>默认值：3000 | 47| indicator | [DotIndicator](#dotindicator10)<sup>10+</sup> \| [DigitIndicator](#digitindicator10)<sup>10+</sup> \| boolean | 设置可选导航点指示器样式。<br/> \- DotIndicator：圆点指示器样式。<br/> \- DigitIndicator：数字指示器样式。<br/> \- boolean：是否启用导航点指示器。<br/> 默认值：true<br/> 默认类型：DotIndicator | 48| loop | boolean | 是否开启循环。<br>设置为true时表示开启循环，在LazyForEach懒循环加载模式下，加载的组件数量建议大于5个。<br/>默认值：true | 49| duration | number | 子组件切换的动画时长，单位为毫秒。<br/>默认值：400 | 50| vertical | boolean | 是否为纵向滑动。<br/>默认值：false | 51| itemSpace | number \| string | 设置子组件与子组件之间间隙。<br/>默认值：0<br/>**说明：** <br/>不支持设置百分比。<br/>类型为number时，默认单位vp;类型为string时，需要显式指定像素单位，如'10px'。 | 52| displayMode | [SwiperDisplayMode](#swiperdisplaymode枚举说明) | 主轴方向上元素排列的模式，优先以displayCount设置的个数显示，displayCount未设置时本属性生效。<br/>默认值：SwiperDisplayMode.Stretch | 53| cachedCount<sup>8+</sup> | number | 设置预加载子组件个数。<br/>默认值：1 <br/>**说明：** <br/> 1、如果设置为按组翻页，即displayCount的swipeByGroup参数设为true，预加载时会以组为基本单位。例如，比如：cacheCount=1，swipeByGroup=true时，会将当前组的前面一组和后面一组的子组件都预加载。 | 54| disableSwipe<sup>8+</sup> | boolean | 禁用组件滑动切换功能。<br/>默认值：false | 55| curve<sup>8+</sup> | [Curve](ts-appendix-enums.md#curve) \| string \| [ICurve](../js-apis-curve.md#icurve)<sup>10+</sup>| 设置Swiper的动画曲线，默认为线性曲线，常用曲线参考[Curve枚举说明](ts-appendix-enums.md#curve)，也可以通过[插值计算](../js-apis-curve.md)模块提供的接口创建自定义的插值曲线对象。<br/>默认值：Curve.Linear | 56| indicatorStyle<sup>(deprecated)</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#resourcecolor),<br/>selectedColor?: [ResourceColor](ts-types.md#resourcecolor)<br/>} | 设置导航点样式：<br/>\- left: 设置导航点距离Swiper组件左边的距离。<br/>\- top: 设置导航点距离Swiper组件顶部的距离。<br/>\- right: 设置导航点距离Swiper组件右边的距离。<br/>\- bottom: 设置导航点距离Swiper组件底部的距离。<br/>\- size: 设置导航点的直径，不支持设置百分比。默认值：6vp。<br/>\- mask: 设置是否显示导航点蒙层样式。<br/>\- color: 设置导航点的颜色。<br/>\- selectedColor: 设置选中的导航点的颜色。 <br/>从API version 8开始支持，从API version 10开始不再维护，建议使用[indicator](#indicator10)代替。 | 57| displayCount<sup>8+</sup> | value: number \| string \| <br />[SwiperAutoFill](#swiperautofill10)<sup>10+</sup>,<br/> swipeByGroup?: boolean<sup>11+</sup> | 设置Swiper视窗内元素显示个数。<br/> - value: 视窗内显示的子元素个数。<br/> - swipeByGroup：是否按组进行翻页。如果设为true，在翻页时会按组进行翻页，每组内子元素的数量为displayCount value的值;如果为false，则为默认翻页行为，即按照子元素进行翻页。<br/> 默认值：1<br/> **说明：** <br/> 1、字符串类型仅支持设置为'auto'，显示效果同SwiperDisplayMode.AutoLinear。<br/> 2、使用number类型且设置小于等于0时，按默认值1显示。<br/> 3、使用number类型时，子组件按照主轴均分Swiper宽度（减去displayCount-1个itemSpace）的方式进行主轴拉伸（收缩）布局。<br/> 4、使用SwiperAutoFill类型时，通过设置一个子组件最小宽度值minSize，会根据Swiper当前宽度和minSize值自动计算并更改一页内元素显示个数。当minSize为空或者小于等于0时，Swiper显示1列。<br/> 5、当按组进行翻页时，如果最后一组的子元素数量小于displayCount时，会使用占位子元素补齐。占位子元素只是用于布局占位，不显示任何内容。在占位子元素的位置会直接显示Swiper自身的背景样式。<br/> 6、在按组翻页时，判断翻页的拖拽距离阈值条件，会更新为Swiper自身宽度的一半。（按子元素翻页时，该阈值为子元素自身宽度的一半） | 58| effectMode<sup>8+</sup> | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | 边缘滑动效果，loop = false时生效。 目前支持的滑动效果参见EdgeEffect的枚举说明。<br/>默认值：EdgeEffect.Spring<br/>**说明：** <br/>控制器接口调用时不生效回弹。 | 59| displayArrow<sup>10+</sup> | value:[ArrowStyle](#arrowstyle10) \| boolean,<br/>isHoverShow?: boolean | 设置导航点箭头样式。<br/>-value: 支持设置箭头和底板样式，异常场景使用ArrowStyle对象中的默认值。<br/>\-isHoverShow：设置鼠标悬停时是否显示箭头。<br/>默认值：false<br/>**说明：**<br/>isHoverShow为false时，常驻显示箭头，支持点击翻页。<br/>isHoverShow为true时，只有在鼠标悬停时才会显示箭头，并支持点击翻页。 | 60| nextMargin<sup>10+</sup> | <br/>[Length](ts-types.md#length)<br/> | 后边距，用于露出后一项的一小部分。<br/>默认值：0<br/>**说明：** <br/>仅当SwiperDisplayMode为STRETCH模式时生效。<br/>当主轴方向为横向布局时，nextmargin/prevmargin中任意一个大于子组件测算的宽度，nextmargin和prevmargin均不显示。<br/>当主轴方向为纵向布局时，nextmargin/prevmargin中任意一个大于子组件测算的高度，nextmargin和prevmargin均不显示。 | 61| prevMargin<sup>10+</sup> | <br/>[Length](ts-types.md#length)<br/> | 前边距，用于露出前一项的一小部分。<br/>默认值：0<br/>**说明：** <br/>仅当SwiperDisplayMode为STRETCH模式时生效。<br/>当主轴方向为横向布局时，nextmargin/prevmargin中任意一个大于子组件测算的宽度，prevmargin和nextmargin均不显示。<br/>当主轴方向为纵向布局时，nextmargin/prevmargin中任意一个大于子组件测算的高度，nextmargin和prevmargin均不显示。 | 62| nestedScroll<sup>11+</sup> | [SwiperNestedScrollMode](#swipernestedscrollmode11枚举说明) | 设置Swiper组件和父组件的嵌套滚动模式。<br/>默认值：SwiperNestedScrollMode.SELF_ONLY <br/>**说明：** <br/>loop为true时Swiper组件没有边缘，不会触发父组件嵌套滚动。| 63 64## SwiperDisplayMode枚举说明 65 66| 名称 | 描述 | 67| --------------------------------- | ---------------------------------------- | 68| Stretch<sup>(deprecated)</sup> | Swiper滑动一页的宽度为Swiper组件自身的宽度。<br>从API version 10开始不再维护，建议使用STRETCH代替。 | 69| AutoLinear<sup>(deprecated)</sup> | Swiper滑动一页的宽度为子组件宽度中的最大值。<br>从API version 10开始不再维护，建议使用AUTO_LINEAR代替。 | 70| STRETCH<sup>10+</sup> | Swiper滑动一页的宽度为Swiper组件自身的宽度。 | 71| AUTO_LINEAR<sup>10+</sup> | Swiper滑动一页的宽度为视窗内最左侧子组件的宽度。 | 72 73## SwiperNestedScrollMode<sup>11+</sup>枚举说明 74 75| 名称 | 描述 | 76| ------------ | ---------------------------------------- | 77| SELF_ONLY | Swiper只自身滚动，不与父组件联动。 | 78| SELF_FIRST | Swiper自身先滚动，自身滚动到边缘以后父组件滚动。父组件滚动到边缘以后，如果父组件有边缘效果，则父组件触发边缘效果，否则Swiper触发边缘效果。 | 79 80## SwiperController 81 82Swiper容器组件的控制器，可以将此对象绑定至Swiper组件，可以通过它控制翻页。 83 84### 导入对象 85 86```ts 87let controller: SwiperController = new SwiperController() 88``` 89 90### showNext 91 92showNext(): void 93 94翻至下一页。翻页带动效切换过程，时长通过duration指定。 95 96### showPrevious 97 98showPrevious(): void 99 100翻至上一页。翻页带动效切换过程，时长通过duration指定。 101 102### finishAnimation 103 104finishAnimation(callback?: () => void): void 105 106停止播放动画。 107 108**参数：** 109 110| 参数名 | 参数类型 | 必填项 | 参数描述 | 111| -------- | ---------- | ---- | -------- | 112| callback | () => void | 否 | 动画结束的回调。 | 113 114## Indicator<sup>10+</sup> 115 116设置导航点距离Swiper组件距离。 117 118| 参数名 | 参数类型 | 必填项 | 参数描述 | 119| ------ | ---------------------------- | ---- | ---------------------------------------- | 120| left | [Length](ts-types.md#length) | 否 | 设置导航点距离Swiper组件左边的距离。<br/>默认值：0<br/>单位：vp | 121| top | [Length](ts-types.md#length) | 否 | 设置导航点距离Swiper组件顶部的距离。<br/>默认值：0<br/>单位：vp | 122| right | [Length](ts-types.md#length) | 否 | 设置导航点距离Swiper组件右边的距离。<br/>默认值：0<br/>单位：vp | 123| bottom | [Length](ts-types.md#length) | 否 | 设置导航点距离Swiper组件底部的距离。<br/>默认值：0<br/>单位：vp | 124| static dot | 无 | 否 | 返回一个DotIndicator对象。 | 125| static digit | 无 | 否 | 返回一个DigitIndicator对象。 | 126 127## DotIndicator<sup>10+</sup> 128 129圆点指示器属性及功能继承自Indicator。 130 131| 参数名 | 参数类型 | 必填项 | 参数描述 | 132| ------------------ | ---------------------------------------- | ---- | ---------------------------------------- | 133| itemWidth | [Length](ts-types.md#length) | 否 | 设置Swiper组件圆点导航指示器的宽，不支持设置百分比。<br/>默认值：6<br/>单位：vp | 134| itemHeight | [Length](ts-types.md#length) | 否 | 设置Swiper组件圆点导航指示器的高，不支持设置百分比。<br/>默认值：6<br/>单位：vp | 135| selectedItemWidth | [Length](ts-types.md#length) | 否 | 设置选中Swiper组件圆点导航指示器的宽，不支持设置百分比。<br/>默认值：12<br/>单位：vp | 136| selectedItemHeight | [Length](ts-types.md#length) | 否 | 设置选中Swiper组件圆点导航指示器的高，不支持设置百分比。<br/>默认值：6<br/>单位：vp | 137| mask | boolean | 否 | 设置是否显示Swiper组件圆点导航指示器的蒙版样式。<br/>默认值：false | 138| color | [ResourceColor](ts-types.md#resourcecolor) | 否 | 设置Swiper组件圆点导航指示器的颜色。<br/>默认值：'\#182431'（10%透明度） | 139| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 设置选中Swiper组件圆点导航指示器的颜色。<br/>默认值：'\#007DFF' | 140 141>**说明：** 142> 143>按压导航点时，导航点会放大至1.33倍显示，因此非按压态时导航点的可见范围边界至实际范围边界存在一定距离，该距离会随着itemWidth、itemHeight、selectedItemWidth、selectedItemHeight等参数变大而变大。 144 145## DigitIndicator<sup>10+</sup> 146 147数字指示器属性及功能继承自Indicator。 148 149| 参数名 | 参数类型 | 必填项 | 参数描述 | 150| ----------------- | ---------------------------------------- | ---- | ---------------------------------------- | 151| fontColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 设置Swiper组件数字导航点的字体颜色。<br/>默认值：'\#ff182431' | 152| selectedFontColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 设置选中Swiper组件数字导航点的字体颜色。<br/>默认值：'\#ff182431' | 153| digitFont | {<br/>size?:[Length](ts-types.md#length)<br/>weight?:number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string<br/>} | 否 | 设置Swiper组件数字导航点的字体样式：<br/>\- size：数字导航点指示器的字体大小，不支持设置百分比。<br/>默认值：14vp<br/>\- weight：数字导航点指示器的字重。 | 154| selectedDigitFont | {<br/>size?:[Length](ts-types.md#length)<br/>weight?:number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string<br/>} | 否 | 设置选中Swiper组件数字导航点的字体样式：<br/>\- size：数字导航点选中指示器的字体大小，不支持设置百分比。<br/>默认值：14vp<br/>\- weight：数字导航点选中指示器的字重。 | 155 156## ArrowStyle<sup>10+</sup> 157左右箭头属性。 158 159| 参数名 | 参数类型 | 必填项 | 参数描述 | 160| ---------------- | ---------------------------------------- | ---- | ---------------------------------------- | 161| showBackground | boolean | 否 | 设置箭头底板是否显示。<br/>默认值：false | 162| isSidebarMiddle | boolean | 否 | 设置箭头显示位置。<br/>默认值：false <br/>默认显示在导航点指示器两侧。 | 163| backgroundSize | [Length](ts-types.md#length) | 否 | 设置底板大小。<br/>在导航点两侧显示：<br/>默认值：24vp<br/>在组件两侧显示：<br/>默认值：32vp<br/>不支持设置百分比。 | 164| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 设置底板颜色。<br/>在导航点两侧显示：<br/>默认值：'\#00000000'<br/>在组件两侧显示：<br/>默认值：'\#19182431' | 165| arrowSize | [Length](ts-types.md#length) | 否 | 设置箭头大小。<br/>在导航点两侧显示时：<br/>默认值：18vp<br/>在组件两侧显示时：<br/>默认值：24vp<br/>**说明：**<br/>showBackground为true时，arrowSize为backgroundSize的3/4。<br/>不支持设置百分比。 | 166| arrowColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 设置箭头颜色。<br/>默认值：'\#182431' | 167 168## SwiperAutoFill<sup>10+</sup> 169 170自适应属性。 171 172| 参数名 | 参数类型 | 必填项 | 参数描述 | 173| ------- | -------------------- | ------ | ------------------------------------ | 174| minSize | [VP](ts-types.md#vp10) | 是 | 设置元素显示最小宽度。<br/>默认值：0 | 175 176## 事件 177 178除支持[通用事件](ts-universal-events-click.md)外，还支持以下事件： 179 180| 名称 | 功能描述 | 181| ---------------------------------------- | ---------------------------------------- | 182| onChange(event: (index: number) => void) | 当前显示的子组件索引变化时触发该事件,返回值为当前显示的子组件的索引值。<br/>- index:当前显示元素的索引。<br/>**说明：** <br>Swiper组件结合LazyForEach使用时，不能在onChange事件里触发子页面UI的刷新。 | 183| onAnimationStart<sup>9+</sup>(event: (index: number, targetIndex<sup>10+</sup>: number, extraInfo<sup>10+</sup>: [SwiperAnimationEvent](ts-types.md#swiperanimationevent10)) => void) | 切换动画开始时触发该回调。<br/>- index:当前显示元素的索引。<br/>- targetIndex:切换动画目标元素的索引。<br/>- extraInfo:动画相关信息，包括主轴方向上当前显示元素和目标元素相对Swiper起始位置的位移，以及离手速度。<br/>**说明：** <br/>参数为动画开始前的index值（不是最终结束动画的index值），多列Swiper时，index为最左侧组件的索引。 | 184| onAnimationEnd<sup>9+</sup>(event: (index: number, extraInfo: [SwiperAnimationEvent](ts-types.md#swiperanimationevent10)) => void) | 切换动画结束时触发该回调。<br/>- index:当前显示元素的索引。<br/>- extraInfo:动画相关信息，只返回主轴方向上当前显示元素相对于Swiper起始位置的位移。<br/>**说明：** <br/>当Swiper切换动效结束时触发，包括动画过程中手势中断，通过SwiperController调用finishAnimation。参数为动画结束后的index值，多列Swiper时，index为最左侧组件的索引。 | 185| onGestureSwipe<sup>10+</sup>(event: (index: number, extraInfo: [SwiperAnimationEvent](ts-types.md#swiperanimationevent10)) => void) | 在页面跟手滑动过程中，逐帧触发该回调。<br/>- index:当前显示元素的索引。<br/>- extraInfo:动画相关信息，只返回主轴方向上当前显示元素相对于Swiper起始位置的位移。<br/>**说明：** <br/>多列Swiper时，index为最左侧组件的索引。 | 186 187## 示例 188 189### 示例1 190```ts 191// xxx.ets 192class MyDataSource implements IDataSource { 193 private list: number[] = [] 194 195 constructor(list: number[]) { 196 this.list = list 197 } 198 199 totalCount(): number { 200 return this.list.length 201 } 202 203 getData(index: number): number { 204 return this.list[index] 205 } 206 207 registerDataChangeListener(listener: DataChangeListener): void { 208 } 209 210 unregisterDataChangeListener() { 211 } 212} 213 214@Entry 215@Component 216struct SwiperExample { 217 private swiperController: SwiperController = new SwiperController() 218 private data: MyDataSource = new MyDataSource([]) 219 220 aboutToAppear(): void { 221 let list: number[] = [] 222 for (let i = 1; i <= 10; i++) { 223 list.push(i); 224 } 225 this.data = new MyDataSource(list) 226 } 227 228 build() { 229 Column({ space: 5 }) { 230 Swiper(this.swiperController) { 231 LazyForEach(this.data, (item: string) => { 232 Text(item.toString()) 233 .width('90%') 234 .height(160) 235 .backgroundColor(0xAFEEEE) 236 .textAlign(TextAlign.Center) 237 .fontSize(30) 238 }, (item: string) => item) 239 } 240 .cachedCount(2) 241 .index(1) 242 .autoPlay(true) 243 .interval(4000) 244 .loop(true) 245 .duration(1000) 246 .itemSpace(0) 247 .indicator( // 设置圆点导航点样式 248 new DotIndicator() 249 .itemWidth(15) 250 .itemHeight(15) 251 .selectedItemWidth(15) 252 .selectedItemHeight(15) 253 .color(Color.Gray) 254 .selectedColor(Color.Blue)) 255 .displayArrow({ // 设置导航点箭头样式 256 showBackground: true, 257 isSidebarMiddle: true, 258 backgroundSize: 24, 259 backgroundColor: Color.White, 260 arrowSize: 18, 261 arrowColor: Color.Blue 262 }, false) 263 .curve(Curve.Linear) 264 .onChange((index: number) => { 265 console.info(index.toString()) 266 }) 267 .onGestureSwipe((index: number, extraInfo: SwiperAnimationEvent) => { 268 console.info("index: " + index) 269 console.info("current offset: " + extraInfo.currentOffset) 270 }) 271 .onAnimationStart((index: number, targetIndex: number, extraInfo: SwiperAnimationEvent) => { 272 console.info("index: " + index) 273 console.info("targetIndex: " + targetIndex) 274 console.info("current offset: " + extraInfo.currentOffset) 275 console.info("target offset: " + extraInfo.targetOffset) 276 console.info("velocity: " + extraInfo.velocity) 277 }) 278 .onAnimationEnd((index: number, extraInfo: SwiperAnimationEvent) => { 279 console.info("index: " + index) 280 console.info("current offset: " + extraInfo.currentOffset) 281 }) 282 283 Row({ space: 12 }) { 284 Button('showNext') 285 .onClick(() => { 286 this.swiperController.showNext() 287 }) 288 Button('showPrevious') 289 .onClick(() => { 290 this.swiperController.showPrevious() 291 }) 292 }.margin(5) 293 }.width('100%') 294 .margin({ top: 5 }) 295 } 296} 297``` 298 299 300 301### 示例2 302```ts 303// xxx.ets 304class MyDataSource implements IDataSource { 305 private list: number[] = [] 306 307 constructor(list: number[]) { 308 this.list = list 309 } 310 311 totalCount(): number { 312 return this.list.length 313 } 314 315 getData(index: number): number { 316 return this.list[index] 317 } 318 319 registerDataChangeListener(listener: DataChangeListener): void { 320 } 321 322 unregisterDataChangeListener() { 323 } 324} 325 326@Entry 327@Component 328struct SwiperExample { 329 private swiperController: SwiperController = new SwiperController() 330 private data: MyDataSource = new MyDataSource([]) 331 332 aboutToAppear(): void { 333 let list: number[] = [] 334 for (let i = 1; i <= 10; i++) { 335 list.push(i); 336 } 337 this.data = new MyDataSource(list) 338 } 339 340 build() { 341 Column({ space: 5 }) { 342 Swiper(this.swiperController) { 343 LazyForEach(this.data, (item: string) => { 344 Text(item.toString()) 345 .width('90%') 346 .height(160) 347 .backgroundColor(0xAFEEEE) 348 .textAlign(TextAlign.Center) 349 .fontSize(30) 350 }, (item: string) => item) 351 } 352 .cachedCount(2) 353 .index(1) 354 .autoPlay(true) 355 .interval(4000) 356 .indicator(Indicator.digit() // 设置数字导航点样式 357 .right("43%") 358 .top(200) 359 .fontColor(Color.Gray) 360 .selectedFontColor(Color.Gray) 361 .digitFont({ size: 20, weight: FontWeight.Bold }) 362 .selectedDigitFont({ size: 20, weight: FontWeight.Normal })) 363 .loop(true) 364 .duration(1000) 365 .itemSpace(0) 366 .displayArrow(true, false) 367 368 Row({ space: 12 }) { 369 Button('showNext') 370 .onClick(() => { 371 this.swiperController.showNext() 372 }) 373 Button('showPrevious') 374 .onClick(() => { 375 this.swiperController.showPrevious() 376 }) 377 }.margin(5) 378 }.width('100%') 379 .margin({ top: 5 }) 380 } 381} 382``` 383 384 385### 示例3 386```ts 387// xxx.ets 388class MyDataSource implements IDataSource { 389 private list: number[] = [] 390 391 constructor(list: number[]) { 392 this.list = list 393 } 394 395 totalCount(): number { 396 return this.list.length 397 } 398 399 getData(index: number): number { 400 return this.list[index] 401 } 402 403 registerDataChangeListener(listener: DataChangeListener): void { 404 } 405 406 unregisterDataChangeListener() { 407 } 408} 409 410@Entry 411@Component 412struct SwiperExample { 413 private swiperController: SwiperController = new SwiperController() 414 private data: MyDataSource = new MyDataSource([]) 415 416 aboutToAppear(): void { 417 let list: number[] = [] 418 for (let i = 1; i <= 10; i++) { 419 list.push(i); 420 } 421 this.data = new MyDataSource(list) 422 } 423 424 build() { 425 Column({ space: 5 }) { 426 Swiper(this.swiperController) { 427 LazyForEach(this.data, (item: string) => { 428 Text(item.toString()) 429 .width('90%') 430 .height(160) 431 .backgroundColor(0xAFEEEE) 432 .textAlign(TextAlign.Center) 433 .fontSize(30) 434 }, (item: string) => item) 435 } 436 .displayCount(3, true) 437 .autoPlay(true) 438 .interval(4000) 439 .loop(true) 440 .duration(1000) 441 .itemSpace(10) 442 .indicator( // 设置圆点导航点样式 443 new DotIndicator() 444 .itemWidth(15) 445 .itemHeight(15) 446 .selectedItemWidth(15) 447 .selectedItemHeight(15) 448 .color(Color.Gray) 449 .selectedColor(Color.Blue)) 450 451 Row({ space: 12 }) { 452 Button('showNext') 453 .onClick(() => { 454 this.swiperController.showNext() 455 }) 456 Button('showPrevious') 457 .onClick(() => { 458 this.swiperController.showPrevious() 459 }) 460 }.margin(5) 461 }.width('100%') 462 .margin({ top: 5 }) 463 } 464} 465``` 466
