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