鸿蒙Next-Scroll滚动-控制纵向滚动

牧羊人_sj

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

阅读量654

点赞数 5

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

于 2024-03-16 07:55:04 首次发布

本文链接：https://blog.csdn.net/qq_59347596/article/details/136753978

版权

鸿蒙专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文介绍了在Vue应用中，如何通过Scroller组件实现滚动功能，包括子组件内容超出父组件时的滚动处理，以及如何监听区域变化并控制滚动，如上下移动和滚动到底部/顶部。

摘要由CSDN通过智能技术生成

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

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)

鼠标按下即可上下滚动

-----------------

控制滚动

文档中心Scroller 文档中心

Scroller:可滚动容器组件的控制器，可以将此组件绑定至容器组件，然后通过它控制容器组件的滚动，同一个控制器不可以控制多个容器组件，目前支持List,Scroll,ScrollBar,Grid,waterFlow.

使用方法：

//导入对象
@State scroller: Scroller = new Scroller()

Scroll(this.scroller) {}
  //绑定事件
  Row() {
      }
      .onClick(()=>{
        //向上移动一段距离  xOffset，yOffset 必填项
        this.scroller.scrollTo({
          xOffset:0, 
          yOffset:1000,
          animation:{ // 设置滚动时长
            duration:10000,
            curve: Curve.Smooth //滚动曲线设置

          }
        })
        this.scroller.scrollEdge(Edge.Bottom) //滚动到底部
        this.scroller.scrollEdge(Edge.Top) //滚动到顶部
  })