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

西河刘卡车医 发表于 2024-11-7 12:05:59

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

鸿蒙OS页面滑动 Scroll方法

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

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

Scroll(){
// 只能有一个子组件
Column(){
// 内容放在内部
// 尺寸超过 Scroll 即可滚动
}
}
.width('100%')
.height(200)
接下来我们简单利用一下
https://i-blog.csdnimg.cn/direct/452b62b4d5c44b28a4ddc42e51012881.png
https://i-blog.csdnimg.cn/direct/6a5735a244b44ca79c0b0e8c63cf2795.png
1.2Scroll的属性

滚动方向属性scrollable

滑动我们可以分为横向和竖向，默认情况我们是竖向滚动，如果想变为横向，这个时候我们就需要利用scrollable属性来切换滚动方向，ScrollDirection.Vertical 纵向 | ScrollDirection.Horizontal 横向，下面我们就来演示一下横向滚动，我们改变以下布局容器，将Column改为Row,并给Scroll添加scrollable属性
https://i-blog.csdnimg.cn/direct/3bf5dbc1bdaf471097b5e8f37ea75f27.png
https://i-blog.csdnimg.cn/direct/52568d631e2947bb8ba2634f18f4ef75.png
扩展在这里为什么我要把Column改为Row

简单的说，Column是垂直布局 row是水平布局
https://i-blog.csdnimg.cn/direct/f3041f89379d4ba8bf78a008d57fede8.png
滚动条设置

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

.scrollBar(BarState.Off)
https://i-blog.csdnimg.cn/direct/b0336a066b184b5e8d9928cfcb3daf11.png
https://i-blog.csdnimg.cn/direct/880d9343bf2b466c9ecda89d7dd305ef.png
scrollBarColor设置滚动条的颜色，scrollBarWidth设置滚动条的宽度

当时这并不常用~
https://i-blog.csdnimg.cn/direct/20152bdac4da4ac2a5d713d80b96b8de.png
https://i-blog.csdnimg.cn/direct/276b026b3c7a416cb6f7ac5732ee822e.png
edgeEffect设置边缘滑动结果

在我们滑动到顶部大概底部的时候，我们不希望他急刹车一样停住，这个时候我们就需要edgeEffect来设置，
.edgeEffect(EdgeEffect.XXX)
EdgeEffect.None 无

EdgeEffect.Spring 弹簧

EdgeEffect.Fade 阴影
https://i-blog.csdnimg.cn/direct/fa4c9431eea241978c520b25cd2bb25d.png
https://i-blog.csdnimg.cn/direct/3a70f69a84cb430381cc0e206069e920.png
https://i-blog.csdnimg.cn/direct/a1c90299d4ce499fb2655cb15c22dae8.png
1.2Scroll的控制器

一样平常开发中大概需要通过代码控制滚动，以及获取滚动的距离，就比如掘金，滚动到一定位置就会表现返回顶部的图标点击图标返回顶部这个时候就可以通过 Scroll 的控制器来实现，我们来看一下基本代码
https://i-blog.csdnimg.cn/direct/160031365e934f379cccffe1875eda65.png
@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)结尾
演示一下
https://i-blog.csdnimg.cn/direct/c1de23ab8feb4c96a84761c0cfc32dd1.png
https://i-blog.csdnimg.cn/direct/c68ab8de85184034b97d4c2417d5313d.png
额外补充滚动速度

有的时候我们不可滚动这么快这个时候我们可以在this.scroller.scrollEdge()添加第二个参数
this.scroller.scrollEdge(Edge.Top,{velocity:3000})
https://i-blog.csdnimg.cn/direct/106eaea2cd04405bad108876d4999097.png
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 时表现返回顶部按钮 <400时隐藏，点击返回顶部。
结果展示

https://i-blog.csdnimg.cn/direct/538f6dee1ce94edd9103efaae6a3839d.png
参考答案

@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告终束

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

页: [1]

IT评测·应用市场-qidao123.com技术社区's Archiver

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