广告位联系
返回顶部
分享到

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

相关技巧 来源:互联网 作者:佚名 发布时间:2024-12-30 22:49:51 人浏览
摘要

鸿蒙UI开发之滚动组件overscroll-decor是一个开源库,旨在为开发者提供一种简单、灵活的方式来实现各种过度滚动(overscroll)动画效果,提升用户的交互体验。该库提供了类似于iOS的过度滚动效

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

功能特点

下载安装

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() } })

 ......

}

属性说明

  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

版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 :
相关文章
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计