OpenHarmony UI开发-组件overscroll-decor类似iOS风格的边缘滚动效果视图。支持下列视图：

简介

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

下载安装

ohpm install @ohos/overscroll-decor

OpenHarmony ohpm 环境配置等更多内容，请参考如何安装 OpenHarmony ohpm 包

使用说明

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

更多详细用法请参考开源库sample页面的实现

属性说明

滚动组件高：默认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

约束与限制

在下述版本验证通过：

Deveco Studio:4.0 (4.0.3.513),SDK:API10 (4.0.10.10)

目录结构

|---- overscroll-decor 
|     |---- entry  # 示例代码文件夹
|     |---- library  # overscroll库文件夹
|           |---- index.ets  # 对外接口
|           |---- src
|                  |---- main
|                        |---- ets
|                              |---- components
|                                    |---- OverScrollDecor.ets  #滚动功能实现
|     |---- README.md  # 安装使用方法

写在最后

如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
点赞，转发，有你们的『点赞和评论』，才是我创造的动力。
关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。
想要获取更多完整鸿蒙最新学习知识点，请移步前往小编：https://qr21.cn/FbP0kt