鸿蒙Next-Scroll滚动

出现滚动的前提条件，当子组件内容超过父组件的宽度或者高度

4.0文档 文档中心

 
  build() {
 
    Column() {
      Row() {
        Text('顶部')
          .textAlign(TextAlign.Center)
          .width('100%')
      }
      .width('100%')
      .height(50)
      .backgroundColor(Color.Red)
 
      Column() {
 
      }
      .width('100%')
      .height(this.mHeight)
      .backgroundColor(Color.Blue)
 
 
      Row() {
        Text('底部')
          .textAlign(TextAlign.Center)
          .width('100%')
      }
      .width('100%')
      .height(50)
      .backgroundColor(Color.Orange)
 
    }
    .justifyContent(FlexAlign.SpaceBetween)
    .width('100%')
    .height('100%')
    .onAreaChange((old: Area, newArea: Area) => {
      this.mHeight=(newArea.height as number) - 100
    })
  }
}

 .onAreaChange((old: Area, newArea: Area) => {
   
 })

  onAreaChange用于监听区域变化并作出相应的响应

通过日志打印我们可以看到里面的参数

创建滚动内容：

// 创建组件 ScrollItem
@Component
struct ScrollItem {
  build() {
    Row() {
      Text('滚动内容')
    }
    .width('100%')
    .height(100)
    .backgroundColor(Color.Yellow)
    .borderRadius(10)
    .margin({
      top: 10,
      bottom:10
    })
    .justifyContent(FlexAlign.Center)
 
  }
}

 Scroll() {
        // 只能有一个组件
        Column() {
          ScrollItem()
          ScrollItem()
          ScrollItem()
          ScrollItem()
          ScrollItem()
          ScrollItem()
          ScrollItem()
          ScrollItem()
          ScrollItem()
          ScrollItem()
          ScrollItem()
          ScrollItem()
          ScrollItem()
        }
      }
      .width('100%')
      .height(this.mHeight)
      .backgroundColor(Color.Blue)

鼠标按下 即可上下滚动