【OpenHarmony】 鸿蒙 UI开辟之 PullToRefresh组件
简介PullToRefresh是一款OpenHarmony环境下可用的下拉革新、上拉加载组件。 支持设置内置动画的各种属性，支持设置自定义动画，支持lazyForEarch的数据作为数据源。
效果展示：
内置动画效果
https://i-blog.csdnimg.cn/img_convert/d29693cd62f3f77aa69a3e65eb4ceab7.gif
https://i-blog.csdnimg.cn/img_convert/595049741b6f4e52a71c1b0049567172.gif
下载安装
登录后复制 ohpm install @ohos/pulltorefresh
[*]1.
使用分析
快速使用
登录后复制 // V1装饰器下的使用方式
import { PullToRefresh } from '@ohos/pulltorefresh'
// 需绑定列表或宫格组件
private scroller: Scroller = new Scroller();
PullToRefresh({
// 必传项，列表组件所绑定的数据
data: $data,
// 必传项，需绑定传入主体布局内的列表或宫格组件
scroller: this.scroller,
// 必传项，自定义主体布局，内部有列表或宫格组件
customList: () => {
// 一个用@Builder修饰过的UI方法
this.getListView();
},
// 可选项，下拉刷新回调
onRefresh: () => {
return new Promise<string>((resolve, reject) => {
// 模拟网络请求操作，请求网络2秒后得到数据，通知组件，变更列表数据
setTimeout(() => {
resolve('刷新成功');
this.data = [...this.dataNumbers];
}, 2000);
});
},
// 可选项，上拉加载更多回调
onLoadMore: () => {
return new Promise<string>((resolve, reject) => {
// 模拟网络请求操作，请求网络2秒后得到数据，通知组件，变更列表数据
setTimeout(() => {
resolve('');
this.data.push("增加的条目" + this.data.length);
}, 2000);
});
},
customLoad: null,
customRefresh: null,
})
// V2装饰器下的使用方式
import { PullToRefreshV2 } from '@ohos/pulltorefresh'
// 需绑定列表或宫格组件
private scroller: Scroller = new Scroller();
PullToRefreshV2({
// 可选项，列表组件所绑定的数据
data: this.data,
// 必传项，需绑定传入主体布局内的列表或宫格组件
scroller: this.scroller,
// 必传项，自定义主体布局，内部有列表或宫格组件
customList: () => {
// 一个用@Builder修饰过的UI方法
this.getListView();
},
// 可选项，下拉刷新回调
onRefresh: () => {
return new Promise<string>((resolve, reject) => {
// 模拟网络请求操作，请求网络2秒后得到数据，通知组件，变更列表数据
setTimeout(() => {
resolve('刷新成功');
this.data = [...this.dataNumbers];
}, 2000);
});
},
// 可选项，上拉加载更多回调
onLoadMore: () => {
return new Promise<string>((resolve, reject) => {
// 模拟网络请求操作，请求网络2秒后得到数据，通知组件，变更列表数据
setTimeout(() => {
resolve('');
this.data.push("增加的条目" + this.data.length);
}, 2000);
});
},
customLoad: null,
customRefresh: null,
})
[*]1.
[*]2.
[*]3.
[*]4.
[*]5.
[*]6.
[*]7.
[*]8.
[*]9.
[*]10.
[*]11.
[*]12.
[*]13.
[*]14.
[*]15.
[*]16.
[*]17.
[*]18.
[*]19.
[*]20.
[*]21.
[*]22.
[*]23.
[*]24.
[*]25.
[*]26.
[*]27.
[*]28.
[*]29.
[*]30.
[*]31.
[*]32.
[*]33.
[*]34.
[*]35.
[*]36.
[*]37.
[*]38.
[*]39.
[*]40.
[*]41.
[*]42.
[*]43.
[*]44.
[*]45.
[*]46.
[*]47.
[*]48.
[*]49.
[*]50.
[*]51.
[*]52.
[*]53.
[*]54.
[*]55.
[*]56.
[*]57.
[*]58.
[*]59.
[*]60.
[*]61.
[*]62.
[*]63.
[*]64.
[*]65.
[*]66.
[*]67.
[*]68.
[*]69.
[*]70.
[*]71.
[*]72.
[*]73.
[*]74.
[*]75.
[*]76.
[*]77.
[*]78.
[*]79.
[*]80.
设置属性示例和设置自定义动画示例请看示例entry
使用限定
1、现在只支持List、Scroll、Tabs、Grid和WaterFlow系统容器组件；
2、暂不支持设置系统容器组件的弹簧效果和阴影效果，使用时需要将系统组件edgeEffect属性的值设置为(EdgeEffect.None)；
3、暂不支持页面触底时自动触发上拉加载功能；
4、暂不支持在页面数据不满一屏时触发上拉加载功能；
5、暂不支持通过代码的方式去触发下拉革新功能；
6、暂不支持在下拉革新动画结束时提供手势结束的回调；
支持lazyForEarch的数据作为数据源
LazyForEach从提供的数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。当LazyForEach在滚动容器中使用了，框架会根据滚动容器可视区域按需创建组件，当组件滑出可视区域外时，框架会举行组件烧毁回收以降低内存占用 接口描述：
登录后复制 LazyForEach(
dataSource: IDataSource, // 需要进行数据迭代的数据源
itemGenerator: (item: any, index?: number) => void,// 子组件生成函数
keyGenerator?: (item: any, index?: number) => string // 键值生成函数
): void
[*]1.
[*]2.
[*]3.
[*]4.
[*]5.
[*]6.
IDataSource类型分析
登录后复制 interface IDataSource {
totalCount(): number; // 获得数据总数
getData(index: number): Object; // 获取索引值对应的数据
registerDataChangeListener(listener: DataChangeListener): void; // 注册数据改变的监听器
unregisterDataChangeListener(listener: DataChangeListener): void; // 注销数据改变的监听器
}
[*]1.
[*]2.
[*]3.
[*]4.
[*]5.
[*]6.
[*]7.
DataChangeListener类型分析
登录后复制 interface DataChangeListener {
onDataReloaded(): void; // 重新加载数据时调用
onDataAdded(index: number): void; // 添加数据时调用
onDataMoved(from: number, to: number): void; // 数据移动起始位置与数据移动目标位置交换时调用
onDataDeleted(index: number): void; // 删除数据时调用
onDataChanged(index: number): void; // 改变数据时调用
onDataAdd(index: number): void; // 添加数据时调用
onDataMove(from: number, to: number): void; // 数据移动起始位置与数据移动目标位置交换时调用
onDataDelete(index: number): void; // 删除数据时调用
onDataChange(index: number): void; // 改变数据时调用
}
[*]1.
[*]2.
[*]3.
[*]4.
[*]5.
[*]6.
[*]7.
[*]8.
[*]9.
[*]10.
[*]11.
[*]12.
具体使用请看 openharmony：LazyForEach：数据懒加载
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启动流程
14.鸿蒙版性能优化指南
.......
[*]1.
[*]2.
[*]3.
[*]4.
[*]5.
[*]6.
[*]7.
[*]8.
[*]9.
[*]10.
[*]11.
[*]12.
[*]13.
[*]14.
[*]15.
属性(接口)分析
PullToRefresh/PullToRefreshV2组件属性
属性类型释义默认值dataObject[]undefined列表或宫格组件所绑定的数据scrollerScroller列表或宫格组件所绑定的Scroller对象undefinedcustomList() => void自定义主体布局，内部有列表或宫格组件undefinedrefreshConfiguratorPullToRefreshConfigurator组件属性配置PullToRefreshConfiguratormWidthLength容器宽undefined(自适应)mHeightLength容器高undefined(自适应)onRefresh() => Promise<string>下拉革新回调1秒后结束下拉革新动画并提示“革新失败”onLoadMore() => Promise<string>上拉加载更多回调1秒后结束上拉加载动画customRefresh() => void自定义下拉革新动画布局undefinedonAnimPullDown`(value?: number, width?: number, height?: number) => voidundefined`下拉中回调onAnimRefreshing`(value?: number, width?: number, height?: number) => voidundefined`革新中回调customLoad() => void自定义上拉加载动画布局undefinedonAnimPullUp`(value?: number, width?: number, height?: number) => voidundefined`上拉中回调onAnimLoading`(value?: number, width?: number, height?: number) => voidundefined`加载中回调 PullToRefreshConfigurator类接口
接口参数类型释义默认值setHasRefreshboolean是否具有下拉革新功能truesetHasLoadMoreboolean是否具有上拉加载功能truesetMaxTranslatenumber可下拉上拉的最大距离100setSensitivitynumber下拉上拉灵敏度0.7setListIsPlacementboolean滑动结束后列表是否归位truesetAnimDurationnumber滑动结束后，回弹动画执行时间150setRefreshHeightnumber下拉动画高度30setRefreshColorstring下拉动画颜色‘#999999’setRefreshBackgroundColorResourceColor下拉动画区域配景色‘rgba(0,0,0,0)’setRefreshTextColorResourceColor下拉加载完毕后提示文本的字体颜色‘#999999’setRefreshTextSizenumber 或 string 或 Resource下拉加载完毕后提示文本的字体巨细18setRefreshAnimDurationnumber下拉动画执行一次的时间，仅在自定义下拉革新动画时有效1000setRefreshCompleteTextHoldTimenumber下拉革新完毕后, 革新乐成文本停顿的时间1000setLoadImgHeightnumber上拉动画中图片的高度30setLoadBackgroundColorResourceColor上拉动画区域配景色‘rgba(0,0,0,0)’setLoadTextColorResourceColor上拉文本的字体颜色‘#999999’setLoadTextSizenumber 或 string 或 Resource上拉文本的字体巨细18setLoadTextPullUp1string上拉1阶段文本‘正在上拉革新…’setLoadTextPullUp2string上拉2阶段文本‘放开革新’setLoadTextLoadingstring上拉加载更多中时的文本‘正在玩命加载中…’
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]