ts-basic-components-scrollbar.md 3.1 KB
Newer Older
Z
zengyawen 已提交
1 2 3
# ScrollBar


E
esterzhou 已提交
4
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
Z
zengyawen 已提交
5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.


The **<ScrollBar>** is used together with scrollable components, such as **<List>**, **<Grid>**, and **<Scroll>**.


## Required Permissions

None


## Child Components

This component can contain a single child component.


## APIs

E
ester.zhou 已提交
23
ScrollBar(value: ScrollBarOptions)
Z
zengyawen 已提交
24

E
ester.zhou 已提交
25
- ScrollBarOptions parameters
E
esterzhou 已提交
26
    | Name | Type | Mandatory | Default Value | Description |
Z
zengyawen 已提交
27
  | -------- | -------- | -------- | -------- | -------- |
E
esterzhou 已提交
28 29 30
  | scroller | [Scroller](ts-container-scroll.md#scroller) | Yes | - | Scroller, which can be bound to and control scrollable components. |
  | direction | ScrollBarDirection | No | ScrollBarDirection.Vertical | Scrollbar direction in which scrollable components scroll. |
  | state | BarState | No | BarState.Auto | Scrollbar state. |
Z
zengyawen 已提交
31

E
esterzhou 已提交
32
  > ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
Z
zengyawen 已提交
33 34 35 36 37 38 39
  > The **<ScrollBar>** component defines the behavior style of the scrollable area, and its subnodes define the behavior style of the scrollbar.
  > 
  > This component is bound to a scrollable component through **scroller**, and can be used to scroll the scrollable component only when their directions are the same. The **<ScrollBar>** component can be bound to only one scrollable component, and vice versa.

- ScrollBarDirection enums
    | Name | Description | 
  | -------- | -------- |
E
esterzhou 已提交
40 41
  | Vertical | Vertical scrollbar. | 
  | Horizontal | Horizontal scrollbar. | 
Z
zengyawen 已提交
42 43 44 45

- BarState enums
    | Name | Description | 
  | -------- | -------- |
E
esterzhou 已提交
46
  | On | Always display. | 
Z
zengyawen 已提交
47
  | Off | Hide. | 
E
esterzhou 已提交
48
  | Auto | Display on demand (displays when the screen is touched and disappears after 2s of inactivity). | 
Z
zengyawen 已提交
49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96


## Example


```
@Entry
@Component
struct ScrollBarExample {
  private scroller: Scroller = new Scroller()
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

  build() {
    Column() {
      Stack({ alignContent: Alignment.End }) {
        Scroll(this.scroller) {
          Flex({ direction: FlexDirection.Column }) {
            ForEach(this.arr, (item) => {
              Row() {
                Text(item.toString())
                  .width('90%')
                  .height(100)
                  .backgroundColor('#3366CC')
                  .borderRadius(15)
                  .fontSize(16)
                  .textAlign(TextAlign.Center)
                  .margin({ top: 5 })
              }
            }, item => item)
          }.margin({ left: 52 })
        }
        .scrollBar(BarState.Off)
        .scrollable(ScrollDirection.Vertical)
        ScrollBar({ scroller: this.scroller, direction: ScrollBarDirection.Vertical,state: BarState.Auto }) {
          Text()
            .width(30)
            .height(100)
            .borderRadius(10)
            .backgroundColor('#C0C0C0')
        }.width(30).backgroundColor('#ededed')
      }
    }
  }
}
```


![en-us_image_0000001256978369](figures/en-us_image_0000001256978369.gif)