鸿蒙Next-Scroll滚动-控横向滚动

牧羊人_sj

已于 2024-03-17 22:27:01 修改

阅读量697

点赞数 1

分类专栏：鸿蒙文章标签：鸿蒙

于 2024-03-17 16:52:23 首次发布

本文链接：https://blog.youkuaiyun.com/qq_59347596/article/details/136785003

版权

鸿蒙专栏收录该内容

10 篇文章

订阅专栏

@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)

  }
}