HarmonyOS开发5.0【实现页面滑动Scroll】方法

鸿蒙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设置滚