【OpenHarmony】 鸿蒙 UI开辟之 PullToRefresh组件

简介

         PullToRefresh是一款OpenHarmony环境下可用的下拉革新、上拉加载组件。 支持设置内置动画的各种属性，支持设置自定义动画，支持lazyForEarch的数据作为数据源。
        效果展示：

    内置动画效果
   

   

    下载安装

                      登录后复制                  

1. ohpm install @ohos/pulltorefresh

复制代码

     

• 1.
  

             使用分析

    快速使用

                      登录后复制                  

1. // V1装饰器下的使用方式
2. import { PullToRefresh } from '@ohos/pulltorefresh'
4. // 需绑定列表或宫格组件
5. private scroller: Scroller = new Scroller();
7. PullToRefresh({
8. // 必传项，列表组件所绑定的数据
9. data: $data,
10. // 必传项，需绑定传入主体布局内的列表或宫格组件
11. scroller: this.scroller,
12. // 必传项，自定义主体布局，内部有列表或宫格组件
13. customList: () => {
14.   // 一个用@Builder修饰过的UI方法
15.   this.getListView();
16. },
17. // 可选项，下拉刷新回调
18. onRefresh: () => {
19.   return new Promise<string>((resolve, reject) => {
20.     // 模拟网络请求操作，请求网络2秒后得到数据，通知组件，变更列表数据
21.     setTimeout(() => {
22.       resolve('刷新成功');
23.       this.data = [...this.dataNumbers];
24.     }, 2000);
25.   });
26. },
27. // 可选项，上拉加载更多回调
28. onLoadMore: () => {
29.   return new Promise<string>((resolve, reject) => {
30.     // 模拟网络请求操作，请求网络2秒后得到数据，通知组件，变更列表数据
31.     setTimeout(() => {
32.       resolve('');
33.       this.data.push("增加的条目" + this.data.length);
34.     }, 2000);
35.   });
36. },
37. customLoad: null,
38. customRefresh: null,
39. })
41. // V2装饰器下的使用方式
42. import { PullToRefreshV2 } from '@ohos/pulltorefresh'
44. // 需绑定列表或宫格组件
45. private scroller: Scroller = new Scroller();
47. PullToRefreshV2({
48.    // 可选项，列表组件所绑定的数据
49.    data: this.data,
50.    // 必传项，需绑定传入主体布局内的列表或宫格组件
51.    scroller: this.scroller,
52.    // 必传项，自定义主体布局，内部有列表或宫格组件
53.    customList: () => {
54.       // 一个用@Builder修饰过的UI方法
55.       this.getListView();
56.    },
57.    // 可选项，下拉刷新回调
58.    onRefresh: () => {
59.       return new Promise<string>((resolve, reject) => {
60.          // 模拟网络请求操作，请求网络2秒后得到数据，通知组件，变更列表数据
61.          setTimeout(() => {
62.             resolve('刷新成功');
63.             this.data = [...this.dataNumbers];
64.          }, 2000);
65.       });
66.    },
67.    // 可选项，上拉加载更多回调
68.    onLoadMore: () => {
69.       return new Promise<string>((resolve, reject) => {
70.          // 模拟网络请求操作，请求网络2秒后得到数据，通知组件，变更列表数据
71.          setTimeout(() => {
72.             resolve('');
73.             this.data.push("增加的条目" + this.data.length);
74.          }, 2000);
75.       });
76.    },
77.    customLoad: null,
78.    customRefresh: null,
79. })

复制代码

     

• 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在滚动容器中使用了，框架会根据滚动容器可视区域按需创建组件，当组件滑出可视区域外时，框架会举行组件烧毁回收以降低内存占用 接口描述：
                      登录后复制                  

1. LazyForEach(
2.     dataSource: IDataSource,             // 需要进行数据迭代的数据源
3.     itemGenerator: (item: any, index?: number) => void,  // 子组件生成函数
4.     keyGenerator?: (item: any, index?: number) => string // 键值生成函数
5. ): void

复制代码

     

• 1.
  
• 2.
  
• 3.
  
• 4.
  
• 5.
  
• 6.
  

             IDataSource类型分析
                      登录后复制                  

1. interface IDataSource {
2.     totalCount(): number; // 获得数据总数
3.     getData(index: number): Object; // 获取索引值对应的数据
4.     registerDataChangeListener(listener: DataChangeListener): void; // 注册数据改变的监听器
5.     unregisterDataChangeListener(listener: DataChangeListener): void; // 注销数据改变的监听器
6. }

复制代码

     

• 1.
  
• 2.
  
• 3.
  
• 4.
  
• 5.
  
• 6.
  
• 7.
  

             DataChangeListener类型分析
                      登录后复制                  

1. interface DataChangeListener {
2.     onDataReloaded(): void; // 重新加载数据时调用
3.     onDataAdded(index: number): void; // 添加数据时调用
4.     onDataMoved(from: number, to: number): void; // 数据移动起始位置与数据移动目标位置交换时调用
5.     onDataDeleted(index: number): void; // 删除数据时调用
6.     onDataChanged(index: number): void; // 改变数据时调用
7.     onDataAdd(index: number): void; // 添加数据时调用
8.     onDataMove(from: number, to: number): void; // 数据移动起始位置与数据移动目标位置交换时调用
9.     onDataDelete(index: number): void; // 删除数据时调用
10.     onDataChange(index: number): void; // 改变数据时调用
11. }

复制代码

     

• 1.
  
• 2.
  
• 3.
  
• 4.
  
• 5.
  
• 6.
  
• 7.
  
• 8.
  
• 9.
  
• 10.
  
• 11.
  
• 12.
  

             具体使用请看 openharmony：LazyForEach：数据懒加载
    DD一下： 鸿蒙开辟各类文档，也可关注公众号<程序猿百晓生>获取。

                      登录后复制                  

1. 1.OpenHarmony开发基础
2. 2.OpenHarmony北向开发环境搭建
3. 3.鸿蒙南向开发环境的搭建
4. 4.鸿蒙生态应用开发白皮书V2.0 & V3.0
5. 5.鸿蒙开发面试真题(含参考答案)
6. 6.TypeScript入门学习手册
7. 7.OpenHarmony 经典面试题(含参考答案)
8. 8.OpenHarmony设备开发入门【最新版】
9. 9.沉浸式剖析OpenHarmony源代码
10. 10.系统定制指南
11. 11.【OpenHarmony】Uboot 驱动加载流程
12. 12.OpenHarmony构建系统--GN与子系统、部件、模块详解
13. 13.ohos开机init启动流程
14. 14.鸿蒙版性能优化指南
15. .......

复制代码

     

• 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企服之家，中国第一个企服评测及商务社交产业平台。