1# Indicator 2 3导航点组件，提供圆点导航点以及数字导航点两种导航点样式。 4 5将原[Swiper](ts-container-swiper.md)组件中的[Indicator](ts-container-swiper.md#indicator)已有的能力作为一个单独组件提供给开发者使用。开发者可以不依赖Swiper组件单独显示导航点，也可以通过IndicatorComponentController与Swiper组件绑定使用。 6 7当多个导航点组件和同一个Swiper绑定时，只有最后一个导航点组件能成功和Swiper绑定。 8 9当一个导航点组件和多个Swiper绑定时，只有最后一个Swiper能成功和导航点组件绑定。 10 11> **说明：** 12> 13> 该组件从API version 15开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 14 15 16## 子组件 17 18不包含子组件。 19 20## 接口 21 22IndicatorComponent(controller?: IndicatorComponentController) 23 24单独导航点组件的构造函数，可配置该组件的控制器。 25 26**卡片能力：** 从API version 15开始，该接口支持在ArkTS卡片中使用。 27 28**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 29 30**系统能力：** SystemCapability.ArkUI.ArkUI.Full 31 32**参数：** 33 34|参数名|类型|必填|说明| 35| ----- | ----- | -- | --- | 36| controller | [IndicatorComponentController](#indicatorcomponentcontroller) | 否 | 设置控制器，可通过该参数控制单独导航点进行导航点之间的跳转。 | 37 38## 属性 39 40除支持[通用属性](ts-component-general-attributes.md)外，还支持以下属性。 41 42### style 43 44style(indicatorStyle: DotIndicator | DigitIndicator) 45 46设置可选导航点指示器样式。 47 48**卡片能力：** 从API version 15开始，该接口支持在ArkTS卡片中使用。 49 50**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 51 52**系统能力：** SystemCapability.ArkUI.ArkUI.Full 53 54**参数：** 55 56| 参数名 | 类型 | 必填 | 说明 | 57| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 58| indicatorStyle | [DotIndicator](ts-container-swiper.md#dotindicator10) \| [DigitIndicator](ts-container-swiper.md#digitindicator10) | 是 | 可选导航点指示器样式。<br/> \- DotIndicator：圆点指示器样式。<br/> \- DigitIndicator：数字指示器样式。<br/> 默认类型：DotIndicator。 | 59 60### count 61 62count(totalCount: number) 63 64设置导航点总数量。 65 66单独导航点组件和Swiper绑定的时候，以Swiper的页面数量为准。 67 68**卡片能力：** 从API version 15开始，该接口支持在ArkTS卡片中使用。 69 70**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 71 72**系统能力：** SystemCapability.ArkUI.ArkUI.Full 73 74**参数：** 75 76| 参数名 | 类型 | 必填 | 说明 | 77| ------ | ------ | ---- | ------------------------------------------------ | 78| totalCount | number | 是 | 导航点总数量。<br/>默认值：2。 | 79 80### initialIndex 81 82initialIndex(index: number) 83 84设置首次显示时当前导航点的索引值。设置小于0或大于等于导航点数量时，按照默认值0处理。 85 86单独导航点组件和Swiper绑定的时候，该属性不生效。 87 88**卡片能力：** 从API version 15开始，该接口支持在ArkTS卡片中使用。 89 90**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 91 92**系统能力：** SystemCapability.ArkUI.ArkUI.Full 93 94**参数：** 95 96| 参数名 | 类型 | 必填 | 说明 | 97| ------ | ------ | ---- | ------------------------------------------------ | 98| index | number | 是 | 首次显示时当前导航点的索引值。<br/>默认值：0。 | 99 100### loop 101 102loop(isLoop: boolean) 103 104设置是否开启循环。设置为true时表示开启循环。 105 106单独导航点组件和Swiper绑定的时候，该属性不生效。 107 108**卡片能力：** 从API version 15开始，该接口支持在ArkTS卡片中使用。 109 110**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 111 112**系统能力：** SystemCapability.ArkUI.ArkUI.Full 113 114**参数：** 115 116| 参数名 | 类型 | 必填 | 说明 | 117| ------ | ------- | ---- | ------------------------------- | 118| isLoop | boolean | 是 | 是否开启循环。<br/>默认值：true。 | 119 120### vertical 121 122vertical(isVertical: boolean) 123 124设置是否为纵向滑动。 125 126单独导航点组件和Swiper绑定的时候，该属性不生效。 127 128**卡片能力：** 从API version 15开始，该接口支持在ArkTS卡片中使用。 129 130**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 131 132**系统能力：** SystemCapability.ArkUI.ArkUI.Full 133 134**参数：** 135 136| 参数名 | 类型 | 必填 | 说明 | 137| ------ | ------- | ---- | ---------------------------------- | 138| isVertical | boolean | 是 | 是否为纵向滑动。true为纵向滑动，false为横向滑动。<br/>默认值：false | 139 140## 事件 141 142除支持[通用事件](ts-component-general-events.md)外，还支持以下事件： 143 144### onChange 145 146onChange(event: Callback\<number>) 147 148当前显示的选中导航点索引变化时触发该事件，可通过回调函数获取当前选中导航点的索引值。 149 150**卡片能力：** 从API version 15开始，该接口支持在ArkTS卡片中使用。 151 152**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 153 154**系统能力：** SystemCapability.ArkUI.ArkUI.Full 155 156**参数：** 157 158| 参数名 | 类型 | 必填 | 说明 | 159| ------ | ------ | ---- | -------------------- | 160| event | [Callback](./ts-types.md#callback12)\<number> | 是 | 当前显示元素的索引变化时触发的回调。| 161 162## IndicatorComponentController 163 164Indicator组件的控制器，可以将此对象绑定至Indicator组件来控制翻页。 165 166### constructor 167 168constructor() 169 170IndicatorComponentController的构造函数。 171 172**卡片能力：** 从API version 15开始，该接口支持在ArkTS卡片中使用。 173 174**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 175 176**系统能力：** SystemCapability.ArkUI.ArkUI.Full 177 178### showNext 179 180showNext(): void 181 182跳转到下一导航点。 183 184**卡片能力：** 从API version 15开始，该接口支持在ArkTS卡片中使用。 185 186**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 187 188**系统能力：** SystemCapability.ArkUI.ArkUI.Full 189 190### showPrevious 191 192showPrevious(): void 193 194跳转到上一导航点。 195 196**卡片能力：** 从API version 15开始，该接口支持在ArkTS卡片中使用。 197 198**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 199 200**系统能力：** SystemCapability.ArkUI.ArkUI.Full 201 202### changeIndex 203 204changeIndex(index: number, useAnimation?: boolean): void 205 206翻至指定页面。 207 208**卡片能力：** 从API version 15开始，该接口支持在ArkTS卡片中使用。 209 210**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 211 212**系统能力：** SystemCapability.ArkUI.ArkUI.Full 213 214**参数：** 215 216| 参数名 | 类型 | 必填 | 说明 | 217| -------- | ---------- | ---- | -------- | 218| index| number | 是 | 指定页面在Swiper中的索引值。 | 219| useAnimation| boolean | 否 | 设置翻至指定页面时是否有动效，true表示有动效，false表示没有动效。<br/>默认值：false。 | 220 221## 示例 222 223### 示例1（圆点单独导航点与Swiper绑定使用） 224该示例通过Swiper组件的indicator接口与IndicatorComponent的构造函数绑定同一IndicatorComponentController对象，实现了圆点单独导航点与Swiper的交互。 225``` 226@Entry 227@Component 228struct DotIndicatorDemo { 229 private indicatorController: IndicatorComponentController = new IndicatorComponentController() 230 private swiperController: SwiperController = new SwiperController() 231 @State list: number[] = [] 232 aboutToAppear(): void { 233 for (let i = 1; i <= 6; i++) { 234 this.list.push(i); 235 } 236 } 237 238 build() { 239 Column() { 240 Swiper(this.swiperController) { 241 ForEach(this.list, (item: string) => { 242 Text(item.toString()) 243 .width('100%') 244 .height(160) 245 .backgroundColor(0xAFEEEE) 246 .textAlign(TextAlign.Center) 247 .fontSize(30) 248 }, (item: string) => item) 249 } 250 .cachedCount(2) 251 .index(0) 252 .autoPlay(true) 253 .interval(2000) 254 .indicator(this.indicatorController) 255 .loop(true) 256 .duration(1000) 257 .itemSpace(0) 258 .curve(Curve.Linear) 259 .onChange((index: number) => { 260 console.info(index.toString()) 261 }) 262 263 IndicatorComponent(this.indicatorController) 264 .initialIndex(0) 265 .style( 266 new DotIndicator() 267 .itemWidth(15) 268 .itemHeight(15) 269 .selectedItemWidth(15) 270 .selectedItemHeight(15) 271 .color(Color.Gray) 272 .selectedColor(Color.Blue)) 273 .loop(true) 274 .count(6) 275 .vertical(true) 276 .onChange((index: number) => { 277 console.log("current index: " + index ) 278 }) 279 } 280 } 281} 282``` 283 284 285### 示例2（数字单独导航点与Swiper绑定使用） 286 287该示例通过Swiper组件的indicator接口与IndicatorComponent的构造函数绑定同一IndicatorComponentController对象，实现了数字单独导航点与Swiper的交互。 288 289``` 290@Entry 291@Component 292struct DigitIndicatorDemo { 293 private indicatorController: IndicatorComponentController = new IndicatorComponentController() 294 private swiperController: SwiperController = new SwiperController() 295 @State list: number[] = [] 296 aboutToAppear(): void { 297 for (let i = 1; i <= 6; i++) { 298 this.list.push(i); 299 } 300 } 301 302 build() { 303 Column() { 304 Swiper(this.swiperController) { 305 ForEach(this.list, (item: string) => { 306 Text(item.toString()) 307 .width('100%') 308 .height(160) 309 .backgroundColor(0xAFEEEE) 310 .textAlign(TextAlign.Center) 311 .fontSize(30) 312 }, (item: string) => item) 313 } 314 .cachedCount(2) 315 .index(0) 316 .autoPlay(true) 317 .interval(2000) 318 .indicator(this.indicatorController) 319 .loop(true) 320 .duration(1000) 321 .itemSpace(0) 322 .curve(Curve.Linear) 323 .onChange((index: number) => { 324 console.info(index.toString()) 325 }) 326 327 IndicatorComponent(this.indicatorController) 328 .initialIndex(0) 329 .style(Indicator.digit() 330 .fontColor(Color.Gray) 331 .selectedFontColor(Color.Gray) 332 .digitFont({ size: 20, weight: FontWeight.Bold }) 333 .selectedDigitFont({ size: 20, weight: FontWeight.Normal })) 334 .loop(true) 335 .count(6) 336 .vertical(true) 337 .onChange((index: number) => { 338 console.log("current index: " + index ) 339 }) 340 } 341 } 342} 343``` 344 345 346
