@Entry
@Component
struct ScrollerCase02 {
@State message: string = 'Hello World';
scroller: Scroller = new Scroller() // 在组件中声明一个scroller的实例
build() {
Row() {
Column() {
//只能有一个组件
Scroll(this.scroller) { //默认纵向布局
Row({ space: 20 }) {
Movie()
Movie()
Movie()
Movie()
Movie()
Movie()
}
}.scrollable(ScrollDirection.Horizontal) //设置滚动方向
.height(200)
.width('100%')
.backgroundColor(Color.Orange)
Row() {
Button('最左侧')
.onClick(() => {
this.scroller.scrollEdge(Edge.Start)
})
Button('最右侧')
.onClick(() => {
this.scroller.scrollEdge(Edge.End)
})
}
}
}
.width('100%')
.height('100%')
.backgroundColor(Color.Blue)
}
}
@Component
struct Movie {
build() {
Row() {
Text('xxx')
.fontSize(Color.White)
}
.width(100)
.height(180)
.justifyContent(FlexAlign.Center)
.backgroundColor(Color.Red)
}
}
鸿蒙Next-Scroll滚动-控横向滚动
于 2024-03-17 16:52:23 首次发布