鸿蒙UI开发之滚动组件overscroll-decor是一个开源库,旨在为开发者提供一种简单、灵活的方式来实现各种过度滚动(overscroll)动画效果,提升用户的交互体验。该库提供了类似于iOS的过度滚动效果,几乎可以应用于所有Android本机可滚动视图,如RecyclerView、ListView、GridView、ScrollView等
功能特点
- 兼容性广:支持 14 及以上版本。
- 轻量级:体积小且无额外依赖,不影响应用性能。
- 可扩展性强:允许开发者完全自定义过度滚动的行为和视觉效果。
- 社区支持:作为开源项目,有活跃的社区和持续的更新维护。
下载安装
1
|
ohpm install @ohos/overscroll-decor
|
主要接口列表
接口 |
方法说明 |
getHeight() |
获取组件高度 |
setHeight() |
设置组件高度 |
getWidth() |
获取组件宽度 |
setWidth() |
设置组件宽度 |
getMargin() |
获取组件边缘度 |
setMargin() |
设置组件边缘度 |
getOrientation() |
获取组件方向 |
setOrientation() |
设置组件方向 |
isScrollBar() |
判断是否是滚动条 |
setScrollBar() |
设置滚动条 |
isOverScrollBounceEffect() |
是否有滚动反弹效果 |
setOverScrollBounceEffect() |
设置滚动反弹效果 |
isUpOverScroll() |
是否向上滚动 |
setUpOverScroll() |
设置向上滚动 |
getOffsetX() |
获取离开X的值 |
setOffsetX() |
设置离开X的值 |
getOffsetY() |
获取离开Y的值 |
setOffsetY() |
设置离开Y的值 |
getTextColor() |
获取字体颜色 |
setTextColor() |
设置字体颜色 |
getDragColorTop() |
获取拖动顶部颜色 |
setDragColorTop() |
设置拖动顶部颜色 |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
1.OpenHarmony开发基础
2.OpenHarmony北向开发环境搭建
3.鸿蒙南向开发环境的搭建
4.鸿蒙生态应用开发白皮书V2.0 & V3.0
5.鸿蒙开发面试真题(含参考答案)
6.TypeScript入门学习手册
7.OpenHarmony 经典面试题(含参考答案)
8.OpenHarmony设备开发入门【最新版】
9.沉浸式剖析OpenHarmony源代码
10.系统定制指南
11.【OpenHarmony】Uboot 驱动加载流程
12.OpenHarmony构建系统--GN与子系统、部件、模块详解
13.ohos开机init启动流程
14.鸿蒙版性能优化指南
.......
|
使用说明
提供滚动容器视图,使用方法类似,以GridViewDemo为例
1、初始化:实例化OverScrollDecor.Model 对象
1
|
private model: OverScrollDecor.Model = new OverScrollDecor.Model()
|
2、属性设置:通过Model类对象设置UI属性来自定义所需风格
1
2
3
4
5
6
7
8
9
|
private aboutToAppear() {
this.model
.setUpOverScroll(true)
.setOrientation(OverScrollDecor.ORIENTATION.VERTICAL)
.setOverScrollBounceEffect(true)
.setScrollBar(true)
.setWidth("100%")
.setHeight("80%")
}
|
3、子组件绘制:
1
2
3
4
5
|
@Builder SpecificChild() {
Column({ space: 10 }) {
......
}.width('100%')
}
|
4、界面绘制:
1
2
3
4
5
6
|
build() {
Stack({ alignContent: Alignment.TopStart }) {
......
OverScrollDecor({ model: this.model!!, child: () => { this.SpecificChild() } })
......
}
|
属性说明
- 滚动组件高:默认px2vp(2340) mHeight: number | string = px2vp(2340)
- 滚动组件宽:默认px2vp(lpx2px(720)) mWidth: number | string = px2vp(lpx2px(720))
- 滚动组件外边距:默认16 mMargin: number = 16
- 组件滚动方向:默认VERTICAL mOrientation: ORIENTATION = 0
- 滚动条设置:默认true mScrollBar: boolean = true
- 边缘滚动效果设置:默认false mOverScrollBounceEffect: boolean = false
- 滚动设置:默认true mUpOverScroll: boolean = true
|