鸿蒙UI开发之滚动组件overscroll-decor安装和使用介绍

更新时间：2024年12月28日 11:39:45 作者：mb676d1289b5dca

鸿蒙UI开发之滚动组件overscroll-decor‌是一个开源库,提供一种简单、灵活的方式来实现各种过度滚动（overscroll）动画效果,提升用户的交互体验,该库提供了类似于iOS的过度滚动效果,几乎可以应用于所有Android,如RecyclerView、ListView、GridView、ScrollView等‌

简介

‌鸿蒙UI开发之滚动组件overscroll-decor‌是一个开源库，旨在为开发者提供一种简单、灵活的方式来实现各种过度滚动（overscroll）动画效果，提升用户的交互体验。该库提供了类似于iOS的过度滚动效果，几乎可以应用于所有Android本机可滚动视图，如RecyclerView、ListView、GridView、ScrollView等‌

功能特点

‌兼容性广‌：支持Android API 14 及以上版本。
‌轻量级‌：体积小且无额外依赖，不影响应用性能。
‌可扩展性强‌：允许开发者完全自定义过度滚动的行为和视觉效果。
‌社区支持‌：作为开源项目，有活跃的社区和持续的更新维护‌。

下载安装

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.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 对象

private model: OverScrollDecor.Model = new OverScrollDecor.Model()

2、属性设置：通过Model类对象设置UI属性来自定义所需风格

private aboutToAppear() {
   this.model
     .setUpOverScroll(true)
     .setOrientation(OverScrollDecor.ORIENTATION.VERTICAL)
     .setOverScrollBounceEffect(true)
     .setScrollBar(true)
     .setWidth("100%")
     .setHeight("80%")
 }

3、子组件绘制：

@Builder SpecificChild() {
   Column({ space: 10 }) {
     ......
   }.width('100%')
 }

4、界面绘制：

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

到此这篇关于鸿蒙UI开发之滚动组件overscroll-decor安装和使用介绍的文章就介绍到这了,更多相关鸿蒙UI开发overscroll-decor内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

Pulsar简介及集群安装过程
pulsar是一个云原生企业级的发布订阅（pub-sub）消息系统,最初由Yahoo开发,并于2016年底开源,现在是Apache软件基金会顶级开源项目,这篇文章主要介绍了Pulsar简介及集群安装,需要的朋友可以参考下
2025-04-04
总结一些你可能不知道的ip地址
IP对大家来说应该再熟悉不过了，但其实IP地址有一些不为人知的事情，可能你并不知道。例如短IP、不同进制的ip等，所以下面这篇文章主要给大家总结介绍了一些你可能不知道的ip地址知识，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-07-07
ROS机器人底盘坐标像素变换操作方法
ROS最常用到的三个坐标系是：map、odom、base_link，这篇文章主要介绍了ROS机器人底盘坐标像素变换，本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-01-01
chatgpt成功解决Access denied 1020错误问题(最新推荐)
从前两天网上开始一直开着的chatgpt网页突然打不开了，提示1020错误，尝试换了不同代理软件或者代理地点仍然无法解决，这篇文章主要介绍了chatgpt成功解决Access denied 1020错误,需要的朋友可以参考下
2023-05-05
24种编程语言的Hello World程序
这篇文章主要介绍了24种编程语言的Hello World程序,包括熟知的Java、C语言、C++、C#、Ruby、Python、PHP等编程语言,需要的朋友可以参考下
2015-06-06
使用微信助手搭建微信返利机器人流程
这篇文章主要介绍了使用微信助手搭建微信返利机器人流程本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-09-09
VScode任务配置(task.json与launch.json)及异常详解
这篇文章主要介绍了VScode任务配置(task.json与launch.json)及异常的相关资料,tasks.json用于配置自动化任务,如编译、构建、执行脚本等,而launch.json用于配置调试器,需要的朋友可以参考下
2025-05-05
ChatGpt无法访问或错误码1020的几种解决方案
ChatGPT是一种语言模型,它被训练来对对话进行建模,下面这篇文章主要给大家介绍了关于ChatGpt无法访问或错误码1020的几种解决方案,文中介绍的非常详细,需要的朋友可以参考下
2023-02-02
Windows10使用Anaconda安装Tensorflow-gpu的教程详解
Anaconda是一个方便的python包管理和环境管理软件，一般用来配置不同的项目环境。这篇文章主要介绍了Windows10使用Anaconda安装Tensorflow-gpu的教程，本文通过图文并茂的形式给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2020-02-02
Notepad++文本比较插件Compare详解(最新免费)
Notepad++是一款强大的文本编辑器，它提供了文件对比功能，可以帮助我们快速找出两个文件之间的差异点，这篇文章主要介绍了Notepad++文本比较插件Compare详解(最新免费)，感兴趣的朋友一起看看吧
2024-01-01