鸿蒙开发基础 —— UI开发之滚动组件overscroll-decor

📑往期推文全新看点（文中附带最新·鸿蒙全栈学习笔记）

✒️ 鸿蒙（HarmonyOS）北向开发知识点记录~

✒️ 鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~

✒️ 鸿蒙应用开发与鸿蒙系统开发哪个更有前景？

✒️ 嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~

✒️ 对于大前端开发来说，转鸿蒙开发究竟是福还是祸？

✒️ 鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？

✒️ 记录一场鸿蒙开发岗位面试经历~

✒️ 持续更新中……

---

简介

类似iOS风格的边缘滚动效果视图。 支持下列视图：RecyclerView, ListView, GridView, ViewPager, ScrollView, HorizontalScrollView, Any View - Text, Image…

下载安装

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()	设置拖动顶部颜色

使用说明

提供滚动容器视图，使用方法类似，以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() } })
 ......
}

属性说明

1. 滚动组件高：默认px2vp(2340) mHeight: number | string = px2vp(2340)
2. 滚动组件宽：默认px2vp(lpx2px(720)) mWidth: number | string = px2vp(lpx2px(720))
3. 滚动组件外边距：默认16 mMargin: number = 16
4. 组件滚动方向：默认VERTICAL mOrientation: ORIENTATION = 0
5. 滚动条设置：默认true mScrollBar: boolean = true
6. 边缘滚动效果设置：默认false mOverScrollBounceEffect: boolean = false
7. 滚动设置：默认true mUpOverScroll: boolean = true