关于鸿蒙开发中滚动容器Scroll的介绍

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

Scroll的核心用法

用法说明：

1. Scroll设置尺寸
2. 设置溢出的子组件【只支持一个子组件】
3. 滚动方向：支持横向和纵向，默认纵向

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

scrollable(value: ScrollDirection) 

设置滚动方向。

取值：

• 纵向：ScrollDirection.Vertical【默认】
• 横向：ScrollDirection.Horizontal
• 不可滚动：ScrollDirection.None

Scroll的常见属性

Scroll的控制器

核心步骤：

实例化 Scroller 的控制器

绑定给 Scroll 组件

控制器的方法 控制滚动，控制器属性 获取滚动距离。

struct ScrollDemo {
    scroller: Scroller = new Scroller()
    
    build() {
        Column() {
            Scroll(this.scroller) { ... }
            Row() {
                Button('返回顶部')
                    .onClick(()=>{
                        this.scroller.scrollEdge(Edge.Top)
                    })
                Button('获取滚动距离')
                    .onClick(()=>{
                        const x = this.scroller.currentOffset().xOffset
                        const y = this.scroller.currentOffset().yOffset
                        AlertDialog.show({
                            message:`x:${x},y:${y}`
                        })
                    })
            }
        }
    }
}

Scroll的事件

滚动事件回调，返回滚动时水平、竖直方向偏移量，单位vp。

onScroll

语法：onScroll(event: (xOffset: number, yOffset: number) => void)

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

触发该事件的条件

1. 滚动组件触发滚动时触发，支持键鼠操作等其他触发滚动的输入设置。
2. 通过滚动控制器API接口调用。
3. 越界回弹。

从API version12开始废弃不再使用，推荐使用onWillScroll事件替代。

onWillScroll

滚动事件回调，Scroll滚动前触发。

语法：onWillScroll(handler: ScrollOnWillScrollCallback)

触发该事件的条件

1. 滚动组件触发滚动时触发，支持键鼠操作等其他触发滚动的输入设置。
2. 通过滚动控制器API接口调用。
3. 越界回弹。

ScrollOnWillScrollCallback的取值

ScrollState枚举说明

ScrollSource枚举说明