鸿蒙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
