Scroll知识总结

一、 了解Scroll

1.1 Scroll的使用场景

可滚动的容器组件，当子组件的布局尺寸超过Scroll的尺寸时，内容可以滚动。

当页面内容由多个区域组成，并且可以滚动时，推荐使用 Scroll

比如

1.2 Scroll的语法格式

Scroll(){
  // 只支持一个子组件
  Column(){
    // 内容放在内部
    // 尺寸超过 Scroll 即可滚动
  }
}
.width('100%')
.height(200)

1.3 几个基本属性

二、 Scroll控制器

日常开发中可能需要通过代码控制滚动，以及获取滚动的距离，比如下图

就可以通过 Scroll 的控制器来实现

这里用到了 2 个方法：

1. scrollEdge：滚动到边缘
2. currentOffset： 获取当前的偏移量

2.1 核心步骤：

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

三、onScroll 事件【Api12开始请使用onWillScroll事件替代】

功能属性

代码显示

@Entry
@Component
struct Index2 {
  sc:Scroller = new Scroller()
  build() {
    Column({space:10}){
      Text('竖向滚动')
        .fontSize(20)
      Scroll(this.sc){
        // 设置内容
        Column(){
        }
        .height(1000)
        .width('100%')
        .linearGradient({
          colors:[['#0094ff',0],[Color.Orange,1]],
        })
      }
      .scrollBarColor(Color.Pink)
      .scrollBarWidth(20)
      // .scrollBar(BarState.Off)
      .edgeEffect(EdgeEffect.Spring)
      .width('100%')
      .height(200)
      .border({width:1,color:Color.Orange})
      .onScroll(()=>{
        console.log('yOffset',this.sc.currentOffset().yOffset)
      })

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