HarmonyOS Scroll容器配合Scroller()控制器自定义滚动条

1. Scroll是一个容器组件，并且只能有一个子组件，当子组件的尺寸大于Scroll尺寸时会滚动显示。

Scroll(){
  //仅支持一个子组件，根据实际情况选择子组件容器,这里我选择了Column(),
  //当子组件是垂直滚动，不要对其设置长度尺寸，但是需要对Scroll()设置尺寸
  Column(){
  }
.width('100%')
.height('100%')
}

2.Scroller是可滚动容器组件的控制器，可以将此组件绑定至容器上，然后通过它控制容器组件的滚动，一个控制器不可以控制多个容器组件，目前支持绑定到List、ScrollBar、Grid、WaterFlow上。但是由于目前harmonyos还是处于不断完善和更新过程中，所以后续可能在支持的绑定组件上会发生变化。

这里我简述一下自定义ScrollBar控制Scroll：

1. 实例化控制器 scro: Scroller = new Scroller()
2. 建立链接 Scroll(this.scro)
3. 创建ScrollBar（）{}，并且与this.scro创立链接

3.这里我使用了两张图片来撑开内容，从而实现内容滚动，大家可以随意选两种图，但是一定要长度够长。 'app.media.homePage' 'app.media.IMG_5910

 @Entry
   @Component
   struct Index {

  //实例化控制器
  scr: Scroller = new Scroller()

  build() {
    Column(){
    
      Stack({alignContent: Alignment.End}){
        //Scroll组件，配合Scroller控制器，实现自定义滚动轴,只能有一个组件
        //绑定控制器
        Scroll(this.scr){
          Column(){
            Image($r('app.media.homePage'))
              .width('100%')
            Image($r('app.media.IMG_5910'))
              .width('100%')
          }

        }
        .width('100%')
        //.layoutWeight(1)
        .scrollBar(BarState.Off)
        //实时获取滚动轴滚动距离
        .onScroll(()=>{
          console.log(''+this.scr.currentOffset().xOffset)
          console.log(''+this.scr.currentOffset().yOffset)
        /*  //返回顶部,通过点击事件触发
          this.scr.scrollEdge(Edge.Top)*/
        })

        //ScrolBar是个组件容器，用来自定义滑动轴
        ScrollBar({
          scroller: this.scr,//绑定控制器
          direction: ScrollBarDirection.Vertical//滚动轴控制的方向
        }){
          Text()
            .width(6)
            .height(8)
            .backgroundColor(Color.Black)
        }
        .height(300)
        .width(6)
        .backgroundColor(Color.Gray)
      }
      //.height(200)
      .layoutWeight(1)

    }
    .width('100%')
    .height('100%')
  }
}