鸿蒙使用 scroll 让页面滚动 && 使用 position 定位盒子 [保姆级教程]

本文链接：https://blog.csdn.net/qq_52602294/article/details/139827190

1, 中间使用 Scroll(){} 让页面进行滚动底部使用 position 固定底部, 代码直接 CV 就行

@Entry
@Component
struct Index {

  @State middleHeight: number = 0

  build() {
    Column(){
      Row()
        .width('100%')
        .height(50)
        .backgroundColor(Color.Green)
      Scroll(){
        Column(){
          scrollItem()
          scrollItem()
          scrollItem()
          scrollItem()
          scrollItem()
          scrollItem()
          scrollItem()
          scrollItem()
          scrollItem()
          scrollItem()
          scrollItem()
          scrollItem()
        }
      }
      .width('100%')
      // .height(this.middleHeight)
      .backgroundColor(Color.Orange)

      Row()
        .width('100%')
        .height(50)
        .backgroundColor(Color.Blue)
        .position({x:0 , y:730})
    }
    .justifyContent(FlexAlign.SpaceBetween)
    .width('100%')
    .height('100%')

    // .onAreaChange((old: Area, newArea: Area) => {
    //   this.middleHeight = (newArea.height as number) - 100
    // })

  }
}

@Component
struct scrollItem{
  build(){
    Row(){
      Text('滚动区域内容')
    }
    .width('90%')
    .height(80)
    .backgroundColor(Color.Pink)
    .margin({ top:20,bottom:10 })
    .justifyContent(FlexAlign.Center)
    .borderRadius(15)
  }
}