reason
When using the Scroll component, the scroll direction is clearly set, and the content exceeds the viewport range, but it cannot be scrolled. This is because the sub-component of the Scroll container has set width or height. Do not set width for Row, and do not set height for Column.
First, you need to ensure that the Scroll container contains only one component
@Entry
@Component
struct ScrollDemo {
build() {
Scroll(){
Text('111').width('100%').height(200).backgroundColor(Color.Pink)
Text('222').width('100%').height(1600).backgroundColor(Color.Orange)
}
}
}
It can be found that the second element is not displayed. This is because only one child component is allowed in the Scroll container, so use a container component to wrap multiple components.
@Entry
@Component
struct ScrollDemo {
build() {
Scroll(){
Column(){
Text('111').width('100%').height(200).backgroundColor(Color.Pink)
Text('222').width('100%').height(1600).backgroundColor(Color.Orange)
}
}
}
}
Secondly, make sure that the child component does not set width or height
The main axis direction of the Row container is horizontal, so do not set width.
The main axis direction of the Column container is vertical, do not set height.