鸿蒙应用开发-Scroll组件

一、了解Scroll

1.基本介绍

Scroll组件是可以滚动的容器组件，当子组件的布局尺寸超Scroll的尺寸时，内容可滚动。 ！！注意：Scroll内部只允许有一个子组件。

2.使用场景

当页面内容是由多个区域组成，且可以滚动时推荐使用Scroll组件，例如： 京东：页面滚动，点击右下角小火箭，返回顶部

二、Scroll的用法

1.Scroll的基本使用

@Entry
@Component
struct Index {
  build() {
    Scroll() {
      Column() {}  //一个子组件
    }
    .width('100%')
    .height('100%')
  }
}

2.scrollable 设置滚动方向

（1）横向滚动 .scrollable（ScrollDirection.Horizontal） （2）纵向滚动 .scrollable（ScrollDirection.Vertical）（默认值）

3.scrollBar 设置滚动条状态

（1）常驻显示 .scrollBar（BarState.On）

（2）不显示 .scrollBar（BarState.Off）

（3）滑动时显示 .scrollBar（BarState.Auto）（默认值）

4.scrollBarColor 设置滚动条颜色

枚举、十六进制、rgba、rgb都可使用

5.scrollBarWidth 设置滚动条宽度

6.edgeEffect 设置边缘的滑动效果

（1）.edgeEffect(EdgeEffect.None) //无效果 （2）.edgeEffect(EdgeEffect.Spring) //弹簧 （3）.edgeEffect(EdgeEffect.Fade) //阴影

三、Scroll的控制器

需要通过代码控制页面的滚动、获取滚动的距离时可以使用Scroll控制器，例如：京东 当页面向下滑动超过一定距离时，显示返回顶部（小火箭），反之隐藏；点击返回顶部则回到顶部。

核心步骤：

1. 实例化 Scroller的 控制器
2. 绑定给 Scroll
3. 调用 控制器的方法控制滚动，通过控制器的属性获取滚动距离

1. scrollEdge 滚动到容器边缘

（1）scrollEdge(Edge.Top)回到顶部 // 使用Start也可以

（2）scrollEdge(Edge.Start)回到开头

（3）scrollEdge(Edge.Bottom)回到底部 // 使用End也可以

（4）scrollEdge(Edge.End)回到结尾

2.currentOffset 获取滚动距离

四、onScroll事件

！！API12开始使用OnWillScroll事件

OnWillScroll事件使用方法和OnScroll一样

使用方法：

Scroll(){
  // 内容略
}
  .onScroll((x,y)=>{
    // 滚动时 一直触发
    // 可以结合 scroller的currentOffset方法 获取滚动距离
  })

但是使用OnWillScroll和OnScroll自带的x，y并不能给我们准确的滚动距离。

因此，要获取准确的滚动距离我们需要结合Scroll控制器来使用

五、最后实现一个类似京东回到顶部（火箭）的功能

@Entry
@Component
struct Index {
  // 1.实例化控制器
  scroller = new Scroller()
  @State isTrue:boolean = false// 回到顶部按钮默认不显示
  build() {
    Column() {
      //  2.绑定
      Scroll(this.scroller) {
        Column() {}
        .width('100%')
        .height(2000)
        .linearGradient({   // 颜色渐变
          angle:90,
          colors:[
            ['#0094ff',0],['#9400ff',1]
          ]
        })
      }
      .width('100%')
      .height(300)
      .onWillScroll(()=>{
        let y = this.scroller.currentOffset().yOffset
        // 判断滑动的距离是否大于400，大于则按钮显示，小于则不显示
        if(y>400){
          this.isTrue = true
        }else {
          this.isTrue = false
        }
      })
      if(this.isTrue){//判断按钮是否显示
        Button('回到顶部')
          .onClick(()=>{
            this.scroller.scrollEdge(Edge.Top)
          })
      }
    }
  }
}

效果如下：