1# Scroll 2 3The **\<Scroll>** component scrolls the content when the layout size of a component exceeds the size of its parent component. 4 5> **NOTE** 6> - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 7> - When nesting a **\<List>** within this component, specify the width and height for the **\<List>** under scenarios where consistently high performance is required. If the width and height are not specified, this component will load all content of the **\<List>**. 8> - This component can scroll only when the size on the main axis is less than the content size. 9> - This component can produce a bounce effect only when there is more than one screen of content. 10 11 12## Child Components 13 14This component supports only one child component. 15 16 17## APIs 18 19Scroll(scroller?: Scroller) 20 21**Parameters** 22 23| Name| Type| Mandatory| Description| 24| -------- | -------- | -------- | -------- | 25| scroller | [Scroller](#scroller) | No| Scroller, which can be bound to scrollable components.| 26 27## Attributes 28 29In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. 30 31| Name | Type | Description | 32| -------------- | ---------------------------------------- | --------- | 33| scrollable | [ScrollDirection](#scrolldirection) | Scroll direction.<br>Default value: **ScrollDirection.Vertical**| 34| scrollBar | [BarState](ts-appendix-enums.md#barstate) | Scrollbar status.<br>Default value: **BarState.Auto**<br>**NOTE**<br>If the container component cannot be scrolled, the scrollbar is not displayed. If the size of a child component of a container component is infinite, the scrollbar cannot be dragged or scrolled with the child component.| 35| scrollBarColor | string \| number \| [Color](ts-appendix-enums.md#color) | Color of the scrollbar.| 36| scrollBarWidth | string \| number | Width of the scrollbar. This attribute cannot be set in percentage.<br>Default value: **4**<br>Unit: vp<br>**NOTE**<br>If the width of the scrollbar exceeds its height, it will change to the default value.| 37| scrollSnap<sup>10+</sup> | [ScrollSnapOptions](#scrollsnapoptions10) | Scroll snapping mode.| 38| edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | Scroll effect. For details, see **EdgeEffect**.<br>Default value: **EdgeEffect.None**| 39| enableScrollInteraction<sup>10+</sup> | boolean | Whether to support scroll gestures. When this attribute is set to **false**, scrolling by finger or mouse is not supported, but the scrolling controller API is not affected.<br>Default value: **true** | 40| nestedScroll<sup>10+</sup> | [NestedScrollOptions](#nestedscrolloptions10) | Nested scrolling options. You can set the nested scrolling mode in the forward and backward directions to implement scrolling linkage with the parent component.| 41| friction<sup>10+</sup> | number \| [Resource](ts-types.md#resource) | Friction coefficient. It applies only to gestures in the scrolling area, and it affects only indirectly the scroll chaining during the inertial scrolling process.<br>Default value: **0.9** for wearable devices and **0.6** for non-wearable devices<br>**NOTE**<br>A value less than or equal to 0 evaluates to the default value.| 42 43## ScrollDirection 44| Name | Description | 45| ---------- | ------------------------ | 46| Horizontal | Only horizontal scrolling is supported. | 47| Vertical | Only vertical scrolling is supported. | 48| None | Scrolling is disabled. | 49| Free<sup>(deprecated) </sup> | Vertical or horizontal scrolling is supported.<br> This API is deprecated since API version 9.| 50 51## ScrollSnapOptions<sup>10+</sup> 52| Name | Type | Description | 53| ---------- | ---------------------------------------- | -------- | 54| snapAlign | [ScrollSnapAlign](ts-container-list.md#scrollsnapalign10) | Alignment mode for the scroll snap position.<br>**NOTE**<br>1. Default value: **ScrollSnapAlign.NONE**<br>2. This API takes effect only when **snapPagination** is set to **Dimension**. **Array\<Dimension\>** is not supported.| 55| snapPagination | [Dimension](ts-types.md#dimension10) \| Array\<Dimension\> | Snap points for the **\<Scroll>** component. Each snap point defines the offset from an edge to which the **\<Scroll>** component can scroll.<br>**NOTE**<br>1. A value of the **Dimension** type indicates the size per page. The system automatically works out the position of each snap point based on the value. For example, if the value is **500**, the position of the snap point is [0,500,1000,1500, ...].<br>2. A value of the **Array\<Dimension\>** type indicates an array of snap point positions defined by **Dimension**. The range of each dimension is [0, scrollable distance]. Point 0 and the bottom of the scrollable distance automatically become the snap points.<br>3. If this attribute is not set or **Dimension** is set to a value less than or equal to 0, the value is regarded as an abnormal value. In this case, there is no scroll snapping. When the value is of the **Array\<Dimension\>** type, the items in the array must be monotonically increasing.<br>4. When the value is a percentage, the actual size is the product of the viewport of the **\<Scroll>** component and the percentage value.| 56| enableSnapToStart | boolean | Whether to enable the snap to start feature. When scroll snapping is defined for the **\<Scroll>** component, setting this attribute to **false** enables the component to scroll between the start edge and the first snap point.<br>**NOTE**<br>1. Default value: **true**<br>2. This attribute takes effect only when **snapPagination** is set to a value of the **Array\<Dimension\>** type; it does not work with values of the **Dimension** type.| 57| enableSnapToEnd | boolean | Whether to enable the snap to end feature. When scroll snapping is defined for the **\<Scroll>** component, setting this attribute to **false** enables the component to scroll between the end edge and the last snap point.<br>**NOTE**<br>1. Default value: **true**<br>2. This attribute takes effect only when **snapPagination** is set to a value of the **Array\<Dimension\>** type; it does not work with values of the **Dimension** type.| 58 59## Events 60 61| Name | Description | 62| ------------------------------------------------------------ | ------------------------------------------------------------ | 63| onScrollFrameBegin<sup>9+</sup>(event: (offset: number, state: [ScrollState](ts-container-list.md#scrollstate)) => { offsetRemain: number; }) | Triggered when each frame scrolling starts. The input parameters indicate the amount by which the **\<Scroll>** component will scroll. The event handler then works out the amount by which the component needs to scroll based on the real-world situation and returns the result.<br>\- **offset**: amount to scroll by.<br>\- **state**: current scrolling status.<br>- **offsetRemain**: actual amount by which the component scrolls.<br>**NOTE**<br>1. This event is triggered when scrolling is started by the **\<Scroll>** component or other input settings, such as keyboard and mouse operations.<br>2. This event is not triggered when the controller API is called.<br>3. This event does not support the out-of-bounds bounce effect.<br>4. This event is not triggered when the scroll bar is dragged.<br>**NOTE**<br>The value of **offsetRemain** can be a negative value.<br>If the **onScrollFrameBegin** event and **scrollBy** method are used to implement nested scrolling, set the **edgeEffect** attribute of the scrollable child component to **None**. For example, if a **\<List>** is nested in the **\<Scroll>** component, **edgeEffect** of the **\<List>** must be set to **EdgeEffect.None**.| 64| onScroll(event: (xOffset: number, yOffset: number) => void) | Triggered to return the horizontal and vertical offsets during scrolling when the specified scroll event occurs.<br>**NOTE**<br>1. This event is triggered when scrolling is started by the **\<Scroll>** component or other input settings, such as keyboard and mouse operations.<br>2. This event is triggered when the controller API is called.<br>3. This event supports the out-of-bounds bounce effect.| 65| onScrollEdge(event: (side: Edge) => void) | Triggered when scrolling reaches the edge.<br>**NOTE**<br>1. This event is triggered when scrolling reaches the edge after being started by the **\<Scroll>** component or other input settings, such as keyboard and mouse operations.<br>2. This event is triggered when the controller API is called.<br>3. This event supports the out-of-bounds bounce effect.| 66| onScrollEnd<sup>(deprecated) </sup>(event: () => void) | Triggered when scrolling stops.<br>This event is deprecated since API version 9. Use the **onScrollStop** event instead.<br>**NOTE**<br>1. This event is triggered when scrolling is stopped by the **\<Scroll>** component or other input settings, such as keyboard and mouse operations.<br>2. This event is triggered when the controller API is called, accompanied by a transition animation.| 67| onScrollStart<sup>9+</sup>(event: () => void) | Triggered when scrolling starts and is initiated by the user's finger dragging the **\<Scroll>** component or its scrollbar. This event is also triggered when the animation contained in the scrolling triggered by [Scroller](#scroller) starts.<br>**NOTE**<br>1. This event is triggered when scrolling is started by the **\<Scroll>** component or other input settings, such as keyboard and mouse operations.<br>2. This event is triggered when the controller API is called, accompanied by a transition animation.| 68| onScrollStop<sup>9+</sup>(event: () => void) | Triggered when scrolling stops after the user's finger leaves the screen. This event is also triggered when the animation contained in the scrolling triggered by [Scroller](#scroller) stops.<br>**NOTE**<br>1. This event is triggered when scrolling is stopped by the **\<Scroll>** component or other input settings, such as keyboard and mouse operations.<br>2. This event is triggered when the controller API is called, accompanied by a transition animation.| 69 70> **NOTE** 71> 72> If the **onScrollFrameBegin** event and **scrollBy** method are used to implement nested scrolling, set the **edgeEffect** attribute of the scrollable child component to **None**. For example, if a **\<List>** is nested in the **\<Scroll>** component, **edgeEffect** of the **\<List>** must be set to **EdgeEffect.None**. 73 74## Scroller 75 76Implements a controller for a scrollable container component. You can bind this component to a container component and use it to control the scrolling of that component. One controller can control only one container component. The supported container components are **\<List>**, **\<Scroll>**, **\<ScrollBar>**, **\<Grid>**, and **\<WaterFlow>**. 77 78 79### Objects to Import 80 81``` 82scroller: Scroller = new Scroller() 83``` 84 85 86### scrollTo 87 88scrollTo(value: { xOffset: number | string, yOffset: number | string, animation?: { duration?: number, curve?: Curve | ICurve } | boolean }): void 89 90 91Scrolls to the specified position. 92 93**Parameters** 94 95| Name | Type | Mandatory| Description | 96| --------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 97| xOffset | number \| string | Yes | Horizontal scrolling offset.<br>**NOTE**<br>This parameter cannot be set in percentage.<br>If the value is less than 0, the offset will be 0 for scrolling without animation; scrolling with animation stops when it reaches the start position.<br>This parameter takes effect only when the scroll axis is the x-axis.| 98| yOffset | number \| string | Yes | Vertical scrolling offset.<br>**NOTE**<br>This parameter cannot be set in percentage.<br>If the value is less than 0, the offset will be 0 for scrolling without animation; scrolling with animation stops when it reaches the start position.<br>This parameter takes effect only when the scroll axis is the y-axis.| 99| animation | {duration?: number, curve?: [Curve](ts-appendix-enums.md#curve) \| [ICurve](../apis/js-apis-curve.md#icurve)<sup>10+ </sup>} \| boolean<sup>10+ </sup> | No | Animation configuration, which includes the following:<br>- **duration**: scrolling duration.<br>- **curve**: scrolling curve.<br>- **boolean**: whether to enable the default spring animation.<br>Default value:<br>{<br>duration: 1000,<br>curve: Curve.Ease<br>}<br>boolean: false<br>**NOTE**<br>A value less than 0 evaluates to the default value.<br>Currently, the **\<List>**, **\<Scroll>**, **\<Grid>**, and **\<WaterFlow>** support the **Boolean** type and **ICurve**.| 100 101 102### scrollEdge 103 104scrollEdge(value: Edge): void 105 106 107Scrolls to the edge of the container, regardless of the scroll axis direction. **Edge.Top** and **Edge.Start** produce the same effect, and **Edge.Bottom** and **Edge.End** produce the same effect. 108 109**Parameters** 110 111| Name | Type| Mandatory | Description | 112| ----- | ---- | ---- | --------- | 113| value | [Edge](ts-appendix-enums.md#edge) | Yes | Edge position to scroll to.| 114 115 116### scrollPage 117 118scrollPage(value: { next: boolean, direction?: Axis }): void 119 120Scrolls to the next or previous page. 121 122**Parameters** 123 124| Name | Type | Mandatory | Description | 125| --------- | ------- | ---- | ------------------------------ | 126| next | boolean | Yes | Whether to turn to the next page. The value **true** means to scroll to the next page, and **false** means to scroll to the previous page.| 127| direction<sup>(deprecated) </sup> | [Axis](ts-appendix-enums.md#axis) | No | Scrolling direction: horizontal or vertical.<br> This API is deprecated since API version 9. | 128 129 130### currentOffset 131 132currentOffset(): { xOffset: number, yOffset: number } 133 134 135Obtains the scrolling offset. 136 137**Return value** 138 139| Type | Description | 140| ---------------------------------------------------------- | ------------------------------------------------------------ | 141| {<br>xOffset: number,<br>yOffset: number<br>} | **xOffset**: horizontal scrolling offset.<br>**yOffset**: vertical scrolling offset.<br>**NOTE**<br>The unit of the return value is vp.| 142 143 144### scrollToIndex 145 146scrollToIndex(value: number, smooth?: boolean, align?: ScrollAlign): void 147 148Scrolls to the item with the specified index. 149 150When **smooth** is set to **true**, all passed items are loaded and counted in layout calculation. This may result in performance issues if a large number of items are involved. 151 152 153> **NOTE** 154> 155> This API only works for the **\<Grid>**, **\<List>**, and **\<WaterFlow>** components. 156 157**Parameters** 158 159| Name | Type| Mandatory| Description | 160| --------------------- | -------- | ---- | ------------------------------------------------------------ | 161| value | number | Yes | Index of the item to be scrolled to in the container.<br>**NOTE**<br>If the value set is a negative value or greater than the maximum index of the items in the container, the value is deemed abnormal, and no scrolling will be performed. | 162| smooth | boolean | No | Whether to enable the smooth animation for scrolling to the item with the specified index. The value **true** means to enable that the smooth animation, and **false** means the opposite.<br>Default value: **false**<br>**NOTE**<br>Currently, only the **\<List>** component supports this parameter.| 163| align | [ScrollAlign](#scrollalign10) | No | How the list item to scroll to is aligned with the container.<br>Default value when the container is **\<List>**: **ScrollAlign.START**<br> Default value when the container is **\<Grid>**: **ScrollAlign.AUTO**<br>**NOTE**<br>Currently, only the **\<List>** and **\<Grid>** components support this parameter.| 164 165### scrollBy<sup>9+</sup> 166 167scrollBy(dx: Length, dy: Length): void 168 169 170Scrolls by the specified amount. 171 172 173> **NOTE** 174> 175> This API is available for the **\<Scroll>**, **\<List>**, **\<Grid>**, and **\<WaterFlow>** components. 176 177**Parameters** 178 179| Name | Type | Mandatory | Description | 180| ----- | ------ | ---- | ----------------- | 181| dx | Length | Yes | Amount to scroll by in the horizontal direction. The percentage format is not supported.| 182| dy | Length | Yes | Amount to scroll by in the vertical direction. The percentage format is not supported.| 183 184### isAtEnd<sup>10+</sup> 185 186isAtEnd(): boolean 187 188Checks whether the component has scrolled to the bottom. 189 190> **NOTE** 191> 192> This API is available for the **\<Scroll>**, **\<List>**, **\<Grid>**, and **\<WaterFlow>** components. 193 194**Return value** 195 196| Type | Description | 197| ------- | -------- | 198| boolean | The value **true** means that the component has scrolled to the bottom, and **false** means the opposite.| 199 200## ScrollAlign<sup>10+</sup> 201 202| Name | Description | 203| ------ | ------------------------------ | 204| START | The start edge of the list item is flush with the start edge of the list. | 205| CENTER | The list item is centered along the main axis of the list. | 206| END | The end edge of the list item is flush with the end edge of the list.| 207| AUTO | The list item is automatically aligned.<br>If the list item is fully contained within the display area, no adjustment is performed. Otherwise, the list item is aligned so that its start or end edge is flush with the start or end edge of the list, whichever requires a shorter scrolling distance.| 208 209## NestedScrollOptions<sup>10+</sup> 210| Name | Type | Description | 211| ----- | ------ | ----------------- | 212| scrollForward | NestedScrollMode | Nested scrolling option when the component scrolls forward.| 213| scrollBackward | NestedScrollMode | Nested scrolling option when the component scrolls backward.| 214 215## NestedScrollMode<sup>10+</sup> 216| Name | Description | 217| ------ | ------------------------------ | 218| SELF_ONLY | The scrolling is contained within the component, and no scroll chaining occurs, that is, the parent component does not scroll when the component scrolling reaches the boundary. | 219| SELF_FIRST | The component scrolls first, and when it hits the boundary, the parent component scrolls. When the parent component hits the boundary, its edge effect is displayed. If no edge effect is specified for the parent component, the edge effect of the child component is displayed instead. | 220| PARENT_FIRST | The parent component scrolls first, and when it hits the boundary, the component scrolls. When the component hits the boundary, its edge effect is displayed. If no edge effect is specified for the component, the edge effect of the parent component is displayed instead.| 221| PARALLEL | The component and its parent component scroll at the same time. When both the component and its parent component hit the boundary, the edge effect of the component is displayed. If no edge effect is specified for the component, the edge effect of the parent component is displayed instead.| 222 223## Example 224### Example 1 225 226```ts 227// xxx.ets 228import Curves from '@ohos.curves' 229 230@Entry 231@Component 232struct ScrollExample { 233 scroller: Scroller = new Scroller() 234 private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 235 236 build() { 237 Stack({ alignContent: Alignment.TopStart }) { 238 Scroll(this.scroller) { 239 Column() { 240 ForEach(this.arr, (item: number) => { 241 Text(item.toString()) 242 .width('90%') 243 .height(150) 244 .backgroundColor(0xFFFFFF) 245 .borderRadius(15) 246 .fontSize(16) 247 .textAlign(TextAlign.Center) 248 .margin({ top: 10 }) 249 }, (item: string) => item) 250 }.width('100%') 251 } 252 .scrollable(ScrollDirection.Vertical) // The scrollbar scrolls in the vertical direction. 253 .scrollBar(BarState.On) // The scrollbar is always displayed. 254 .scrollBarColor(Color.Gray) // The scrollbar color is gray. 255 .scrollBarWidth(10) // The scrollbar width is 10. 256 .friction(0.6) 257 .edgeEffect(EdgeEffect.None) 258 .onScroll((xOffset: number, yOffset: number) => { 259 console.info(xOffset + ' ' + yOffset) 260 }) 261 .onScrollEdge((side: Edge) => { 262 console.info('To the edge') 263 }) 264 .onScrollStop(() => { 265 console.info('Scroll Stop') 266 }) 267 268 Button('scroll 150') 269 .height('5%') 270 .onClick(() => { // Click to scroll down by 150.0 vp. 271 this.scroller.scrollBy(0, 150) 272 }) 273 .margin({ top: 10, left: 20 }) 274 Button('scroll 100') 275 .height('5%') 276 .onClick(() => { // Click to scroll down by 100.0 vp. 277 const yOffset: number = this.scroller.currentOffset().yOffset; 278 this.scroller.scrollTo({ xOffset: 0, yOffset: yOffset + 100 }) 279 }) 280 .margin({ top: 60, left: 20 }) 281 Button('scroll 100') 282 .height('5%') 283 .onClick(() => {// Click to scroll down by 100.0 vp. An animation is applied to the scrolling. 284 let curve = Curves.interpolatingSpring(100, 1, 228, 30) // Create a step curve. 285 const yOffset: number = this.scroller.currentOffset().yOffset; 286 this.scroller.scrollTo({ xOffset: 0, yOffset: yOffset + 100, animation: { duration: 1000, curve: curve } }) 287 }) 288 .margin({ top: 110, left: 20 }) 289 Button('back top') 290 .height('5%') 291 .onClick(() => { // Click to go back to the top. 292 this.scroller.scrollEdge(Edge.Top) 293 }) 294 .margin({ top: 160, left: 20 }) 295 Button('next page') 296 .height('5%') 297 .onClick(() => { // Click to go to the next page. 298 this.scroller.scrollPage({ next: true }) 299 }) 300 .margin({ top: 210, left: 20 }) 301 }.width('100%').height('100%').backgroundColor(0xDCDCDC) 302 } 303} 304``` 305 306 307 308### Example 2 309```ts 310@Entry 311@Component 312struct NestedScroll { 313 @State listPosition: number = 0; // 0 indicates scrolling to the top of the list, 1 indicates scrolling to the middle of the list, and 2 indicates scrolling to the bottom of the list. 314 private arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] 315 private scrollerForScroll: Scroller = new Scroller() 316 private scrollerForList: Scroller = new Scroller() 317 318 build() { 319 Flex() { 320 Scroll(this.scrollerForScroll) { 321 Column() { 322 Text("Scroll Area") 323 .width("100%") 324 .height("40%") 325 .backgroundColor(0X330000FF) 326 .fontSize(16) 327 .textAlign(TextAlign.Center) 328 .onClick(() => { 329 this.scrollerForList.scrollToIndex(5) 330 }) 331 332 List({ space: 20, scroller: this.scrollerForList }) { 333 ForEach(this.arr, (item: number) => { 334 ListItem() { 335 Text("ListItem" + item) 336 .width("100%") 337 .height("100%") 338 .borderRadius(15) 339 .fontSize(16) 340 .textAlign(TextAlign.Center) 341 .backgroundColor(Color.White) 342 }.width("100%").height(100) 343 }, (item: string) => item) 344 } 345 .width("100%") 346 .height("50%") 347 .edgeEffect(EdgeEffect.None) 348 .friction(0.6) 349 .onReachStart(() => { 350 this.listPosition = 0 351 }) 352 .onReachEnd(() => { 353 this.listPosition = 2 354 }) 355 .onScrollFrameBegin((offset: number) => { 356 if ((this.listPosition == 0 && offset <= 0) || (this.listPosition == 2 && offset >= 0)) { 357 this.scrollerForScroll.scrollBy(0, offset) 358 return { offsetRemain: 0 } 359 } 360 this.listPosition = 1 361 return { offsetRemain: offset }; 362 }) 363 364 Text("Scroll Area") 365 .width("100%") 366 .height("40%") 367 .backgroundColor(0X330000FF) 368 .fontSize(16) 369 .textAlign(TextAlign.Center) 370 } 371 } 372 .width("100%").height("100%") 373 }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding(20) 374 } 375} 376``` 377 378 379 380### Example 3 381```ts 382@Entry 383@Component 384struct StickyNestedScroll { 385 @State arr: number[] = [] 386 387 @Styles 388 listCard() { 389 .backgroundColor(Color.White) 390 .height(72) 391 .width("100%") 392 .borderRadius(12) 393 } 394 395 build() { 396 Scroll() { 397 Column() { 398 Text("Scroll Area") 399 .width("100%") 400 .height("40%") 401 .backgroundColor('#0080DC') 402 .textAlign(TextAlign.Center) 403 Tabs({ barPosition: BarPosition.Start }) { 404 TabContent() { 405 List({ space: 10 }) { 406 ForEach(this.arr, (item: number) => { 407 ListItem() { 408 Text("item" + item) 409 .fontSize(16) 410 }.listCard() 411 }, (item: string) => item) 412 }.width("100%") 413 .edgeEffect(EdgeEffect.Spring) 414 .nestedScroll({ 415 scrollForward: NestedScrollMode.PARENT_FIRST, 416 scrollBackward: NestedScrollMode.SELF_FIRST 417 }) 418 }.tabBar("Tab1") 419 420 TabContent() { 421 }.tabBar("Tab2") 422 } 423 .vertical(false) 424 .height("100%") 425 }.width("100%") 426 } 427 .edgeEffect(EdgeEffect.Spring) 428 .friction(0.6) 429 .backgroundColor('#DCDCDC') 430 .scrollBar(BarState.Off) 431 .width('100%') 432 .height('100%') 433 } 434 435 aboutToAppear() { 436 for (let i = 0; i < 30; i++) { 437 this.arr.push(i) 438 } 439 } 440} 441``` 442 443### Example 4 444```ts 445@Entry 446@Component 447struct Index { 448 scroller: Scroller = new Scroller; 449 private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15] 450 build() { 451 Scroll(this.scroller) { 452 Column() { 453 ForEach(this.arr, (item: number) => { 454 Text(item.toString()) 455 .width('90%') 456 .height(200) 457 .backgroundColor(0xFFFFFF) 458 .borderWidth(1) 459 .borderColor(Color.Black) 460 .borderRadius(15) 461 .fontSize(16) 462 .textAlign(TextAlign.Center) 463 }, (item: string) => item) 464 }.width('100%').backgroundColor(0xDCDCDC) 465 } 466 .backgroundColor(Color.Yellow) 467 .height('100%') 468 .edgeEffect(EdgeEffect.Spring) 469 .scrollSnap({snapAlign:ScrollSnapAlign.START, snapPagination:400, enableSnapToStart:true, enableSnapToEnd:true}) 470 } 471} 472``` 473 474
