首页 > 其他分享 >鸿蒙Next-Scroll滚动-控制纵向滚动

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

时间:2024-03-17 21:59:17浏览次数:25  
标签:滚动 100% Next width ScrollItem 组件 height 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)

鼠标按下 即可上下滚动

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

控制滚动

文档中心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) //滚动到顶部
  })

标签:滚动,100%,Next,width,ScrollItem,组件,height,Scroll
From: https://blog.csdn.net/qq_59347596/article/details/136753978

相关文章

  • FPD、DPD、vintage、滚动率、迁移率
    1、vintage、滚动率、迁移率https://zhuanlan.zhihu.com/p/81027037/vintage滚动率:前六个月到后六个月状态迁徙率是在vintage基础上加工而来的。vintagevintage:selectloan_month,mob,sum(loan_amt)as"放款金额",sum(if(overdueday>=1,left_repay_principal,0))as1+剩......
  • kmp算法next数组详解
             kmp算法是一项特别重要的算法,它的难点主要在于next数组的求解。##首先next[i]表示字符串下标i前子字符串(s[0~i-1])的最长相同前后缀的值。以字符串s="ababbacaba"为例子分析。前缀:aababaababababbababba ababbac ababbaca ababbacab后缀:aba......
  • 关闭Mac 双指左右滚动功能(浏览器前进、后退丢失页面)
    关闭所有浏览器的前进后退功能系统偏好设置=>触控板=>更多手势=>在页面之间轻扫取消勾选即可。如下图所示:仅关闭Chrome的前进后退功能如果是Chrome浏览器,还可以使用下面这份方法在终端输入执行下面两条命令,然后重启Chrome,需要注意的是Chrome重启需要完全退出程序......
  • MediaBox音视频终端SDK已适配鸿蒙星河版(HarmonyOS NEXT)
    2024年1月,HarmonyOS NEXT 鸿蒙星河版系统开发者预览版开放申请,该系统将只能安装为鸿蒙开发的原生应用,而不再兼容安卓应用。对此,阿里云MediaBox音视频终端SDK产品已实现功能的鸿蒙化迁移和重构,全面适配鸿蒙系统HarmonyOS NEXT系统。 当前, 阿里云播放器SDK预览版已面向所有......
  • 火狐浏览器滚动条无法修改,如何解决
    没处理之前谷歌是正常的,火狐滚动条很宽很丑处理之后滚动条变细了,好看了 css代码在此:*{scrollbar-color:rgba(0,0,0,0.2)rgba(0,0,0,0.1);/*第一个方块颜色,第二个轨道颜色(用于更改火狐浏览器样式)*/scrollbar-width:thin;/*火狐滚动条无法自......
  • R语言风险价值:ARIMA,GARCH模型,Delta-normal法滚动估计,预测VaR(Value at Risk)和回测分析
    原文链接:http://tecdat.cn/?p=24492原文出处:拓端数据部落公众号介绍此分析的目的是帮助客户构建一个过程,以在给定时变波动性的情况下正确估计风险价值。风险价值被广泛用于衡量金融机构的市场风险。我们的时间序列数据包括1258天的股票收益。为了解释每日收益率方差的一小部......
  • Vue3 组合函数 element-plus table数据滚动播放
    Vue滚动播放组合函数import{onMounted,onUnmounted}from"vue";exportfunctioncreateScroll(tableRef){lettimer=null;functionstartScroll(){consttable=tableRef.value.layout.table.refs;consttableWrapper=table.bodyWrapper.f......
  • GDPU unity游戏开发 滚动小球
      解锁你的游戏大门,适合小白入门看的,通过简单的实例大概了解unity的一些基本操作。常用快捷键 CtrlC/V/X/Z对应复制/粘贴/剪切/回退很多小白都惟手熟尔了,W物体对象的位置/平移/移动 ,E物体对象旋转,R物体对象缩放,Q/Alt中键用于场景的移动,右键/Alt左键用于场景的旋转,滚......
  • 大屏 滚动表格 滚动table dv-scroll-board
     <template><divclass="boxmt10"><divclass="mb10">重复性问题分析</div><div><dv-scroll-board:config="provinceConfirmedCountBoardConfig"style="width:100%;......
  • js 实现点击下拉滚动
    在JavaScript中实现点击下拉菜单后滚动到特定位置,通常用于导航栏的下拉菜单或对话框内容的自动滚动等场景。以下是一个简单的示例:假设我们有一个HTML结构,包含一个可点击的元素(如按钮)和一个需要滚动的下拉列表:<buttonid="dropdown-toggle">点击打开下拉菜单</button><div......