鸿蒙-Scroll

1,创建对象，创建遍历数组

scroller:Scroller = new Scroller()
private arr:number[] = [1,2,3,4,5,6,7,8,9]

2、设置滚动方向等属性

.scrollable(ScrollDirection.Vertical) // 设置滚动方向为垂直方向 .scrollBar(BarState.On) // 设置滚动条长显 .scrollBarColor(Color.Gray) // 设置滚动条背景颜色 .scrollBarWidth(10) // 设置滚动条宽度 .edgeEffect(EdgeEffect.Spring) // 设置滚动条底部回弹

3、遍历数组

水平方向

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


  build() {
    Scroll(this.scroller){
      Row() {
        ForEach(this.arr,(item:number)=>{

          Text(item.toString())
            .width(300)
            .height(150)
            .backgroundColor(Color.White)
            .borderRadius(15)
            .fontSize(16)
            .textAlign(TextAlign.Center)
            .margin(10)
        })
      }
      .height('100%')
      // .width('100%')
      .backgroundColor(Color.Green)
    }
    .height('100%')
    .backgroundColor(Color.Pink)
    .scrollable(ScrollDirection.Horizontal) // 设置滚动方向为垂直方向
    .scrollBar(BarState.On) //  设置滚动条长显
    .scrollBarColor(Color.Blue) //  设置滚动条背景颜色
    .scrollBarWidth(10) //  设置滚动条宽度
    .edgeEffect(EdgeEffect.Spring)  // 设置滚动条底部回弹

  }
}