鸿蒙OS页面滑动 Scroll方法

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

1.Scroll

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

1.1基本用法

Scroll(){
  // 只能有一个子组件
  Column(){
    // 内容放在内部
    // 尺寸超过 Scroll 即可滚动
  }
}
.width('100%')
.height(200)

接下来我们简单使用一下

1.2Scroll的属性滚动方向属性scrollable

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

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

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

滚动条设置

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

scrollBar设置滚动条状态

.scrollBar(BarState.Off)

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

当时这并不常用~

edgeEffect设置边缘滑动效果

在我们滑动到顶部或者底部的时候，我们不希望他急刹车一样停住，这个时候我们就需要edgeEffect来设置，

.edgeEffect(EdgeEffect.XXX)

EdgeEffect.None 无
EdgeEffect.Spring 弹簧
EdgeEffect.Fade 阴影

1.2Scroll的控制器

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

@Entry
@Component
struct Index {
  // 1. 创建 Scroller 控制器
  scroller: Scroller = new Scroller()
  build() {
    Column() {
      // 2. 设置给Scroll
      Scroll(this.scroller) {
        // 内容
      }
    }
  }
}

在这里我们会用到两种方法

scrollEdge

currentOffset

滚动到容器边缘，不区分滚动轴方向，Edge.Top和Edge.Start表现相同，Edge.Bottom和Edge.End表现相同。

this.scroller.scrollEdge(Edge.Top)顶部
this.scroller.scrollEdge(Edge.Start)开头
this.scroller.scrollEdge(Edge.Bottom)底部
this.scroller.scrollEdge(Edge.End)结尾

演示一下

额外补充 滚动速度

有的时候我们不行滚动这么快这个时候我们可以在this.scroller.scrollEdge()添加第二个参数

this.scroller.scrollEdge(Edge.Top,{velocity:3000})

this.scroller.currentOffset().xOffset // x 轴滚动距离
this.scroller.currentOffset().yOffset // y 轴滚动距离

1.3 Scroll 事件

Scroll 组件提供了一些事件，可以适当的时候添加逻辑

onScroll(event: (xOffset: number, yOffset: number) => void)滚动事件回调, 返回滚动时水平、竖直方向偏移量。

触发该事件的条件 ：

1、滚动组件触发滚动时触发，支持键鼠操作等其他触发滚动的输入设置。

2、通过滚动控制器API接口调用。

3、越界回弹。

代码写法

Scroll(){
  // 内容略
}
  .onScroll((x,y)=>{
    // 滚动时 一直触发
    // 结合 scroller的currentOffset方法 获取滚动距离
  })

综合实战

已经学完了基本用法，直接进入小小的实战，要求滚动距离 >400 时显示返回顶部按钮 效果展示

参考答案

@Entry
@Component
struct Index {
  scroller: Scroller = new Scroller()
  @State isShow:boolean=false
  build() {
    Column(){
      Scroll(this.scroller){
        // 只能有一个子组件
        Column(){
          Text('页面滚动')
            .height(200)
            .width('100%')
            .backgroundColor(Color.Pink)
          Text('页面滚动')
            .height(200)
            .width('100%')
            .backgroundColor(Color.Orange)
          Text('页面滚动')
            .height(200)
            .width('100%')
            .backgroundColor(Color.Blue)
          Text('页面滚动')
            .height(200)
            .width('100%')
            .backgroundColor(Color.Gray)
          Text('页面滚动')
            .height(200)
            .width('100%')
            .backgroundColor(Color.Yellow)
          Text('页面滚动')
            .height(200)
            .width('100%')
            .backgroundColor(Color.Pink)
          Text('页面滚动')
            .height(200)
            .width('100%')
            .backgroundColor(Color.Orange)
          Text('页面滚动')
            .height(200)
            .width('100%')
            .backgroundColor(Color.Blue)
          Text('页面滚动')
            .height(200)
            .width('100%')
            .backgroundColor(Color.Gray)
          Text('页面滚动')
            .height(200)
            .width('100%')
            .backgroundColor(Color.Yellow)
          Text('页面滚动')
            .height(200)
            .width('100%')
            .backgroundColor(Color.Pink)
          Text('页面滚动')
            .height(200)
            .width('100%')
            .backgroundColor(Color.Orange)
          Text('页面滚动')
            .height(200)
            .width('100%')
            .backgroundColor(Color.Blue)
          Text('页面滚动')
            .height(200)
            .width('100%')
            .backgroundColor(Color.Gray)
          Text('页面滚动')
            .height(200)
            .width('100%')
            .backgroundColor(Color.Yellow)
        }
      }
      .width('100%')
      .height('100%')
      .onScroll((x,y)=>{
        if(this.scroller.currentOffset().yOffset>400){
          this.isShow = true
        }else{
          this.isShow = false
        }
      })
      if (this.isShow){
        Column(){
          Text('返回顶部')
            .width(150)
            .height(150)
            .fontColor('#fff')
            .textAlign(TextAlign.Center)
            .backgroundColor(Color.Black)
            .offset({y:-150})
            .onClick(()=>{
              this.scroller.scrollEdge(Edge.Top,{velocity:1000})
            })
        }
      }
    }
    .width('100%')
    .height('100%')
  }
}

结束语

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