qidao123.com技术社区-IT企服评测·应用市场

标题: HarmonyOS开发5.0【实现页面滑动Scroll】方法 [打印本页]
作者: 西河刘卡车医    时间: 2024-11-7 12:05
标题: HarmonyOS开发5.0【实现页面滑动Scroll】方法
鸿蒙OS页面滑动 Scroll方法

在前端中我们在做H5时，页面的滑动是可以靠内容来撑开举行滑动，而在的鸿蒙OS中，页面的滑动并不能靠内容撑出来，如果想要实现页面滑动结果我们就要利用容器组件使页面能举行滑动。
1.Scroll

可滚动的容器组件，当子组件的布局尺寸超过Scroll的尺寸时，内容可以滚动。当页面内容由多个区域组成，并且可以滚动时，推荐利用 Scroll
1.1基本用法

  1. Scroll(){
  2.   // 只能有一个子组件
  3.   Column(){
  4.     // 内容放在内部
  5.     // 尺寸超过 Scroll 即可滚动
  6.   }
  7. }
  8. .width('100%')
  9. .height(200)
复制代码
接下来我们简单利用一下


1.2Scroll的属性

滚动方向属性scrollable

滑动我们可以分为横向和竖向，默认情况我们是竖向滚动，如果想变为横向，这个时候我们就需要利用scrollable属性来切换滚动方向，ScrollDirection.Vertical 纵向 | ScrollDirection.Horizontal 横向，下面我们就来演示一下横向滚动，我们改变以下布局容器，将Column改为Row,并给Scroll添加scrollable属性


扩展 在这里为什么我要把Column改为Row

简单的说 ，Column是垂直布局 row是水平布局

滚动条设置

我们在滚动的时候发现有滚动条的存在，在有的时候我们想要把滚动条去掉大概改变颜色等等，这个时候我们就要用到scrollBar设置滚动条状态，scrollBarColor设置滚动条的颜色，scrollBarWidth设置滚动条的宽度接下来我们简单利用一下
scrollBar设置滚动条状态

  1. .scrollBar(BarState.Off)
复制代码


scrollBarColor设置滚动条的颜色，scrollBarWidth设置滚动条的宽度

当时这并不常用~


edgeEffect设置边缘滑动结果

在我们滑动到顶部大概底部的时候，我们不希望他急刹车一样停住，这个时候我们就需要edgeEffect来设置，
  1. .edgeEffect(EdgeEffect.XXX)
复制代码
  1. EdgeEffect.None 无
  3. EdgeEffect.Spring 弹簧
  5. EdgeEffect.Fade 阴影
复制代码



1.2Scroll的控制器

一样平常开发中大概需要通过代码控制滚动，以及获取滚动的距离，就比如掘金，滚动到一定位置就会表现返回顶部的图标 点击图标返回顶部 这个时候就可以通过 Scroll 的控制器来实现，我们来看一下基本代码

  1. @Entry
  2. @Component
  3. struct Index {
  4.   // 1. 创建 Scroller 控制器
  5.   scroller: Scroller = new Scroller()
  7.   build() {
  8.     Column() {
  9.       // 2. 设置给Scroll
  10.       Scroll(this.scroller) {
  11.         // 内容
  12.       }
  13.     }
  14.   }
  15. }
复制代码
在这里我们会用到两种方法
   scrollEdge
    currentOffset
  滚动到容器边缘，不区分滚动轴方向，Edge.Top和Edge.Start表现相同，Edge.Bottom和Edge.End表现相同。
  1. this.scroller.scrollEdge(Edge.Top)顶部
  2. this.scroller.scrollEdge(Edge.Start)开头
  3. this.scroller.scrollEdge(Edge.Bottom)底部
  4. this.scroller.scrollEdge(Edge.End)结尾
复制代码
演示一下


额外补充 滚动速度

有的时候我们不可滚动这么快 这个时候我们可以在this.scroller.scrollEdge()添加第二个参数
  1. this.scroller.scrollEdge(Edge.Top,{velocity:3000})
复制代码

  1. this.scroller.currentOffset().xOffset // x 轴滚动距离
  2. this.scroller.currentOffset().yOffset // y 轴滚动距离
复制代码
1.3 Scroll 事件

Scroll 组件提供了一些事件，可以得当的时候添加逻辑
   onScroll(event: (xOffset: number, yOffset: number) => void) 滚动事件回调, 返回滚动时水平、竖直方向偏移量。
  触发该事件的条件 ：
  1、滚动组件触发滚动时触发，支持键鼠操作等其他触发滚动的输入设置。
  2、通过滚动控制器API接口调用。
  3、越界回弹。
  代码写法
  1. Scroll(){
  2.   // 内容略
  3. }
  4.   .onScroll((x,y)=>{
  5.     // 滚动时 一直触发
  6.     // 结合 scroller的currentOffset方法 获取滚动距离
  7.   })
复制代码
综合实战

已经学完了基本用法，直接进入小小的实战，要求滚动距离 >400 时表现返回顶部按钮 <400时隐藏，点击返回顶部。
结果展示


参考答案

  2. @Entry
  3. @Component
  4. struct Index {
  5.   scroller: Scroller = new Scroller()
  6.   @State isShow:boolean=false
  7.   build() {
  8.     Column(){
  9.       Scroll(this.scroller){
  10.         // 只能有一个子组件
  11.         Column(){
  12.           Text('页面滚动')
  13.             .height(200)
  14.             .width('100%')
  15.             .backgroundColor(Color.Pink)
  16.           Text('页面滚动')
  17.             .height(200)
  18.             .width('100%')
  19.             .backgroundColor(Color.Orange)
  20.           Text('页面滚动')
  21.             .height(200)
  22.             .width('100%')
  23.             .backgroundColor(Color.Blue)
  24.           Text('页面滚动')
  25.             .height(200)
  26.             .width('100%')
  27.             .backgroundColor(Color.Gray)
  28.           Text('页面滚动')
  29.             .height(200)
  30.             .width('100%')
  31.             .backgroundColor(Color.Yellow)
  32.           Text('页面滚动')
  33.             .height(200)
  34.             .width('100%')
  35.             .backgroundColor(Color.Pink)
  36.           Text('页面滚动')
  37.             .height(200)
  38.             .width('100%')
  39.             .backgroundColor(Color.Orange)
  40.           Text('页面滚动')
  41.             .height(200)
  42.             .width('100%')
  43.             .backgroundColor(Color.Blue)
  44.           Text('页面滚动')
  45.             .height(200)
  46.             .width('100%')
  47.             .backgroundColor(Color.Gray)
  48.           Text('页面滚动')
  49.             .height(200)
  50.             .width('100%')
  51.             .backgroundColor(Color.Yellow)
  52.           Text('页面滚动')
  53.             .height(200)
  54.             .width('100%')
  55.             .backgroundColor(Color.Pink)
  56.           Text('页面滚动')
  57.             .height(200)
  58.             .width('100%')
  59.             .backgroundColor(Color.Orange)
  60.           Text('页面滚动')
  61.             .height(200)
  62.             .width('100%')
  63.             .backgroundColor(Color.Blue)
  64.           Text('页面滚动')
  65.             .height(200)
  66.             .width('100%')
  67.             .backgroundColor(Color.Gray)
  68.           Text('页面滚动')
  69.             .height(200)
  70.             .width('100%')
  71.             .backgroundColor(Color.Yellow)
  72.         }
  73.       }
  74.       .width('100%')
  75.       .height('100%')
  76.       .onScroll((x,y)=>{
  77.         if(this.scroller.currentOffset().yOffset>400){
  78.           this.isShow = true
  79.         }else{
  80.           this.isShow = false
  81.         }
  82.       })
  83.       if (this.isShow){
  84.         Column(){
  85.           Text('返回顶部')
  86.             .width(150)
  87.             .height(150)
  88.             .fontColor('#fff')
  89.             .textAlign(TextAlign.Center)
  90.             .backgroundColor(Color.Black)
  91.             .offset({y:-150})
  92.             .onClick(()=>{
  93.               this.scroller.scrollEdge(Edge.Top,{velocity:1000})
  94.             })
  95.         }
  96.       }
  97.     }
  98.     .width('100%')
  99.     .height('100%')
  100.   }
  101. }
复制代码
竣事语

Scroll 只是实现鸿蒙滚动的其中一个方法，方法还有许多如List，Grid也都可以实现滚动结果，其他方法下次分享，第一次分享鸿蒙 记录一下 如果我分享的方法有错误的地方请大佬们批评，我会积极改正，OK告终束

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 qidao123.com技术社区-IT企服评测·应用市场 (https://dis.qidao123.com/) Powered by Discuz! X3.4