简介
类似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() } })
......
}
DD一下： 鸿蒙开发各类文档，也可关注公众号<程序猿百晓生>获取。
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启动流程
.......
属性说明
- 滚动组件高：默认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
