README.md
1# 下拉刷新与上滑加载案例
2
3### 介绍
4
5本示例介绍使用第三方库的PullToRefresh组件实现列表的下拉刷新数据和上滑加载后续数据。
6
7### 效果图预览
8
9<img src="./pulltorefresh/src/main/resources/base/media/pull_to_refresh_news.gif" width="300">
10
11**使用说明**
12
131. 进入页面，下拉列表触发刷新数据事件，等待数据刷新完成。
142. 上滑列表到底部，触发加载更多数据事件，等待数据加载完成。
15
16### 实现思路
17
181. 使用第三方库pullToRefresh组件，将列表组件、绑定的数据对象和scroller对象包含进去，并添加上滑与下拉方法。源码参考[PullToRefreshNews.ets](./pulltorefresh/src/main/ets/pages/PullToRefreshNews.ets)
19 ```typescript
20 PullToRefresh({
21 // 必传项，列表组件所绑定的数据
22 data: $newsData,
23 // 必传项，需绑定传入主体布局内的列表或宫格组件
24 scroller: this.scroller,
25 // 必传项，自定义主体布局，内部有列表或宫格组件
26 customList: () => {
27 // 一个用@Builder修饰过的UI方法
28 this.getListView();
29 },
30 // 下拉刷新回调
31 onRefresh: () => {
32 return new Promise<string>((resolve, reject) => {
33 ...
34 });
35 },
36 // 上滑加载回调
37 onLoadMore: () => {
38 return new Promise<string>((resolve, reject) => {
39 ...
40 });
41 },
42 customLoad: () => this.customLoad(),
43 customRefresh: null,
44 })
45 ```
462. 使用LazyForEach循环渲染列表。源码参考[PullToRefreshNews.ets](./pulltorefresh/src/main/ets/pages/PullToRefreshNews.ets)
47 ```typescript
48 LazyForEach(this.newsData, (item: NewsData) => {
49 ListItem() {
50 ...
51 }
52 });
53 ```
543. 模拟列表总页数，加载完全部信息后提示已经到底部。源码参考[PullToRefreshNews.ets](./pulltorefresh/src/main/ets/pages/PullToRefreshNews.ets)
55 ```javascript
56 onLoadMore: () => {
57 return new Promise<string>((resolve, reject) => {
58 // 模拟数据列表页超过4页后已到达底部，无法继续加载
59 if (this.newsDataListIndex < NEWS_MAX_LIST) {
60 // 模拟网络请求操作，请求网络1.5秒后得到数据，通知组件变更列表数据
61 setTimeout(() => {
62 let newsModelMockData: Array<NewsData> = getNews(MOCK_DATA_FILE_ONE_DIR)
63 for (let j = 0; j < NEWS_MOCK_DATA_COUNT; j++) {
64 this.newsData.pushData(newsModelMockData[j]);
65 }
66 this.newsDataListIndex++;
67 resolve('');
68 }, NEWS_REFRESH_TIME);
69 } else {
70 // 如果已满4页，更改上拉提示信息提示已经加载完所有数据
71 setTimeout(() => {
72 resolve('');
73 }, NEWS_REFRESH_TIME);
74 }
75 });
76 }
77 ```
784. 自定义上拉加载动画。源码参考[PullToRefreshNews.ets](./pulltorefresh/src/main/ets/pages/PullToRefreshNews.ets)
79 ```typescript
80 @Builder
81 private customLoad() {
82 Row() {
83 Stack() {
84 // 上拉1阶段箭头图片
85 Image(pull_icon_up)
86 .width('100%')
87 .height('100%')
88 .objectFit(ImageFit.Contain)
89 .visibility(this.isPullUp ? Visibility.Visible : Visibility.Hidden)
90 .rotate({
91 z: 1,
92 angle: this.angle1 !== undefined ? this.angle1 : 0
93 })
94 // 加载时图片
95 Image(pull_icon_load)
96 .width('100%')
97 .height('100%')
98 .objectFit(ImageFit.Contain)
99 .visibility(this.isLoading ? Visibility.Visible : Visibility.Hidden)
100 .rotate({
101 z: 1,
102 angle: this.angle2 !== undefined ? this.angle2 : 0
103 })
104 }
105 // 最后一页加载时隐藏加载图片
106 .width(this.newsDataListIndex === NEWS_MAX_LIST && this.isLoading ? 0 :
107 this.refreshConfigurator.getLoadImgHeight())
108 .height(this.newsDataListIndex === NEWS_MAX_LIST && this.isLoading ? 0 :
109 this.refreshConfigurator.getLoadImgHeight())
110
111 // 上拉过程与加载时提示文本
112 Text(this.loadText)
113 .height('100%')
114 .textAlign(TextAlign.Center)
115 .margin({ left: this.newsDataListIndex === NEWS_MAX_LIST && this.isLoading ? 0 : 8 })
116 .fontColor(this.refreshConfigurator !== undefined ? this.refreshConfigurator.getLoadTextColor() : 0)
117 .fontSize(this.refreshConfigurator !== undefined ? this.refreshConfigurator.getLoadTextSize() : 0)
118 }
119 .height('100%')
120 }
121 ```
1225. 设置上拉与加载时的动画回调。源码参考[PullToRefreshNews.ets](./pulltorefresh/src/main/ets/pages/PullToRefreshNews.ets)
123 ```typescript
124 onAnimPullUp: (value, width, height) => {
125 if (value !== undefined && width !== undefined && height !== undefined) {
126 if (value) {
127 this.isLoading = false;
128 this.isPullUp = true;
129 // 判断上拉拖拽过程中高度是否超过阶段临界值
130 if (value < LOAD_PULL_STATE_CHANGE) {
131 // 归零角度，保持箭头朝上
132 this.angle1 = 0;
133 // 改变提示文本为上拉1阶段
134 this.loadText = LOAD_TEXT_PULL_UP_1;
135 } else {
136 // 翻转角度，保持箭头朝下
137 this.angle1 = 180;
138 // 改变提示文本为上拉2阶段
139 this.loadText = LOAD_TEXT_PULL_UP_2;
140 }
141 }
142 }
143 },
144
145 onAnimLoading: (value, width, height) => {
146 if (value !== undefined && width !== undefined && height !== undefined) {
147 if (value) {
148 this.isPullUp = false;
149 this.isLoading = true;
150 // 更改角度使加载图片保持旋转
151 this.angle2 = value * 360;
152 // 判读页码是否为最后一页
153 if (this.newsDataListIndex !== NEWS_MAX_LIST) {
154 this.loadText = LOAD_DEFAULT_TEXT;
155 } else {
156 // 最后一页更换文本提示已经到底了
157 this.loadText = LOAD_STOP_TEXT;
158 }
159 }
160 }
161 }
162 ```
163### 高性能知识点
164
165不涉及
166
167### 工程结构&模块类型
168 ```
169 pulltorefreshnews // har类型
170 |---model
171 |---|---AppInfo.ets // App信息
172 |---|---UserInformation.ets // 用户信息
173 |---view
174 |---|---PullToRefreshNews.ets // 视图层-场景列表页面
175 ```
176
177### 模块依赖
178
179[PullToRefresh](https://gitee.com/openharmony-sig/PullToRefresh)
180
181### 参考资料
182
183[PullToRefresh](https://gitee.com/openharmony-sig/PullToRefresh)
184[LazyForEach](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-rendering-control-lazyforeach.md)
185[PullToRefresh第三方库](https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Fpulltorefresh)
186
187### 相关权限
188
189不涉及。
190
191### 依赖
192
193不涉及。
194
195### 约束与限制
196
1971.本示例仅支持标准系统上运行，支持设备：RK3586。
198
1992.本示例为Stage模型，支持API12版本SDK，SDK版本号（API Version 12 Release）。
200
2013.本示例需要使用DevEco Studio版本号（DevEco Studio 5.0.0 Release）及以上版本才可编译运行。
202
203### 下载
204
205如需单独下载本工程，执行如下命令：
206
207```shell
208git init
209git config core.sparsecheckout true
210echo code/UI/PullToRefresh/ > .git/info/sparse-checkout
211git remote add origin https://gitee.com/openharmony/applications_app_samples.git
212git pull origin master
