前言:
可滚动的容器组件,当子组件的布局尺寸超过Scroll的尺寸时,内容可以滚动。
当页面内容由多个区域组成,并且可以滚动时,推荐使用 Scroll
基本用法:
- Scroll 设置尺寸
- 设置 子组件(只支持一个子组件)
- 设置滚动:
(1) 竖向滚动:子组件的高度超出 Scroll
(2) 横向滚动:子组件的宽度超出 Scroll,scrollable改为横向滚动
- 根据需求调整属性
@Entry
@Component
struct Index {
build() {
Column({ space: 10 }) {
Text('竖向滚动')
.fontSize(20)
// Scroll 容器尺寸固定
// 内容横向超出 Scroll 即可滚动
Scroll() {
Text()
.width('100%')
.height(400)
.backgroundColor(Color.Pink)
}
.width('100%')
.height(200)
Text('横向滚动')
.fontSize(20)
// Scroll 容器尺寸固定
// 内容横向超出 Scroll 即可滚动
Scroll() {
Text()
.width('200%')
.height(400)
.backgroundColor(Color.Orange)
}
// 横向滚动
.width('100%')
.height(200)
.scrollable(ScrollDirection.Horizontal)
}
.width('100%')
.height('100%')
}
}
名称 | 参数类型 | 描述 |
---|---|---|
scrollable | ScrollDirection | 设置滚动方向:ScrollDirection.Vertical 纵向ScrollDirection.Horizontal 横向 |
scrollBar | BarState | 设置滚动条状态。 |
scrollBarColor | string 、 number 、 Color | 设置滚动条的颜色。 |
scrollBarWidth | string 、 number | 设置滚动条的宽度 |
edgeEffect | value:EdgeEffect | 设置边缘滑动效果。EdgeEffect.None 无EdgeEffect.Spring 弹簧EdgeEffect.Fade 阴影 |
Scroll 事件:
Scroll 组件提供了一些事件,让开发者可以在适当的时候添加逻辑
名称 | 功能描述 |
---|---|
onDidScroll | Scroll滚动前触发的回调。 |
@Entry
@Component
struct Page01_Scroll {
// 1. 创建控制器对象 new + Scroller 的方式创建
// 不需要设置 @State
scroller: Scroller = new Scroller()
@State x: number = 0
build() {
Column({ space: 10 }) {
Scroll(this.scroller) {
Text()
.width('100%')
.height(400)
.backgroundColor(Color.Pink)
}
.width('100%')
.height(200)
.onDidScroll(()=>{
const x = this.scroller.currentOffset().yOffset
console.log('',x)
})
}
.width('100%')
.height('100%')
}
}