快捷導(dǎo)航

鴻蒙UI開發(fā)之滾動組件overscroll-decor安裝和使用介紹

更新時間：2024年12月28日 11:39:45 作者：mb676d1289b5dca

鴻蒙UI開發(fā)之滾動組件overscroll-decor?是一個開源庫,提供一種簡單、靈活的方式來實(shí)現(xiàn)各種過度滾動（overscroll）動畫效果,提升用戶的交互體驗(yàn),該庫提供了類似于iOS的過度滾動效果,幾乎可以應(yīng)用于所有Android,如RecyclerView、ListView、GridView、ScrollView等?

簡介

‌鴻蒙UI開發(fā)之滾動組件overscroll-decor‌是一個開源庫，旨在為開發(fā)者提供一種簡單、靈活的方式來實(shí)現(xiàn)各種過度滾動（overscroll）動畫效果，提升用戶的交互體驗(yàn)。該庫提供了類似于iOS的過度滾動效果，幾乎可以應(yīng)用于所有Android本機(jī)可滾動視圖，如RecyclerView、ListView、GridView、ScrollView等‌

功能特點(diǎn)

‌兼容性廣‌：支持Android API 14 及以上版本。
‌輕量級‌：體積小且無額外依賴，不影響應(yīng)用性能。
‌可擴(kuò)展性強(qiáng)‌：允許開發(fā)者完全自定義過度滾動的行為和視覺效果。
‌社區(qū)支持‌：作為開源項(xiàng)目，有活躍的社區(qū)和持續(xù)的更新維護(hù)‌。

下載安裝

ohpm install @ohos/overscroll-decor

主要接口列表

接口	方法說明
getHeight()	獲取組件高度
setHeight()	設(shè)置組件高度
getWidth()	獲取組件寬度
setWidth()	設(shè)置組件寬度
getMargin()	獲取組件邊緣度
setMargin()	設(shè)置組件邊緣度
getOrientation()	獲取組件方向
setOrientation()	設(shè)置組件方向
isScrollBar()	判斷是否是滾動條
setScrollBar()	設(shè)置滾動條
isOverScrollBounceEffect()	是否有滾動反彈效果
setOverScrollBounceEffect()	設(shè)置滾動反彈效果
isUpOverScroll()	是否向上滾動
setUpOverScroll()	設(shè)置向上滾動
getOffsetX()	獲取離開X的值
setOffsetX()	設(shè)置離開X的值
getOffsetY()	獲取離開Y的值
setOffsetY()	設(shè)置離開Y的值
getTextColor()	獲取字體顏色
setTextColor()	設(shè)置字體顏色
getDragColorTop()	獲取拖動頂部顏色
setDragColorTop()	設(shè)置拖動頂部顏色

1.OpenHarmony開發(fā)基礎(chǔ)
2.OpenHarmony北向開發(fā)環(huán)境搭建
3.鴻蒙南向開發(fā)環(huán)境的搭建
4.鴻蒙生態(tài)應(yīng)用開發(fā)白皮書V2.0 & V3.0
5.鴻蒙開發(fā)面試真題（含參考答案） 
6.TypeScript入門學(xué)習(xí)手冊
7.OpenHarmony 經(jīng)典面試題(含參考答案)
8.OpenHarmony設(shè)備開發(fā)入門【最新版】
9.沉浸式剖析OpenHarmony源代碼
10.系統(tǒng)定制指南
11.【OpenHarmony】Uboot 驅(qū)動加載流程
12.OpenHarmony構(gòu)建系統(tǒng)--GN與子系統(tǒng)、部件、模塊詳解
13.ohos開機(jī)init啟動流程
14.鴻蒙版性能優(yōu)化指南
.......

使用說明

提供滾動容器視圖，使用方法類似，以GridViewDemo為例

1、初始化：實(shí)例化OverScrollDecor.Model 對象

private model: OverScrollDecor.Model = new OverScrollDecor.Model()

2、屬性設(shè)置：通過Model類對象設(shè)置UI屬性來自定義所需風(fēng)格

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

屬性說明

滾動組件高：默認(rèn)px2vp(2340) mHeight: number | string = px2vp(2340)
滾動組件寬：默認(rèn)px2vp(lpx2px(720)) mWidth: number | string = px2vp(lpx2px(720))
滾動組件外邊距：默認(rèn)16 mMargin: number = 16
組件滾動方向：默認(rèn)VERTICAL mOrientation: ORIENTATION = 0
滾動條設(shè)置：默認(rèn)true mScrollBar: boolean = true
邊緣滾動效果設(shè)置：默認(rèn)false mOverScrollBounceEffect: boolean = false
滾動設(shè)置：默認(rèn)true mUpOverScroll: boolean = true

到此這篇關(guān)于鴻蒙UI開發(fā)之滾動組件overscroll-decor安裝和使用介紹的文章就介紹到這了,更多相關(guān)鴻蒙UI開發(fā)overscroll-decor內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！