鸿蒙Next仓颉语言开发实战教程：下拉刷新和上拉加载更多

在移动应用中，各种列表页面离不开下拉刷新和上拉加载更多，我们的商城应用也是如此。今天介绍一下在仓颉开发语言中如何实现这一功能。
下拉刷新

仓颉开发语言直接提供了下拉刷新的组件，叫做Refresh，使用起来也非常方便:

1. @State var headerLoading : Bool = false;
3. Refresh(RefreshParams(refreshing: @Binder(this.headerLoading))) {
4. List{
5.         ForEach(this.carList,
6.         itemGeneratorFunc:{
7.             
8.             item:CarItem, index: Int64 => ListItem {
9.             }
10.             })
11.         }
12. }
13. .onRefreshing({ =>
14.     Timer.once(Duration.second*2,{=>
15.             this.headerLoading = false
16.            })
17.     AppLog.info('onRefreshing')
18.     })
19. .onStateChange({state =>
20.      AppLog.info('onStateChange')
21.     })

复制代码

上述代码演示了Refresh的基本使用，并且使用计时器模拟网络加载效果，两秒后自动加载完成，其中onRefreshing是进入刷新状态的回调，onStateChange为刷新状态改变的回调。
计时器的用法也还需要大家再次熟悉一下，Timer.once表示一次性的计时器，Duration.second*2表示执行间隔是2秒，这种写法还是比较独特的。
上拉加载更多
关于上拉加载更多，仓颉的文档中并没有这部分的内容，幽蓝君参考ArkTs写了一个解决方案，仅供大家参考。

实现思路是在List最后一行添加加载动画组件，默认隐藏，当List滑动到最后一行则显示加载动画并开始请求数据，具体代码如下：

1. @State var footerLoading:Bool = false
3. List{
4.     ForEach(this.carList,
5.         itemGeneratorFunc:{
6.             
7.             item:CarItem, index: Int64 => ListItem {
8.             }
9.             })
10.    
11.     ListItem {
12.         if(this.footerLoading){
13.             Row(12){
14.                 LoadingProgress()
15.                 .height(40)
16.                 .width(40)
17.                
18.                 Text('加载中...')
19.                 .fontSize(14)
20.                 .fontColor(Color.GRAY)
21.             }
22.             .width(100.percent)
23.             .height(50)
24.             .alignItems(VerticalAlign.Center)
25.             .justifyContent(FlexAlign.Center)
26.         }
27.     }
28. }
29. .onScrollIndex({startNum,endNum =>
30.     if(Int64(endNum) >= this.carList.size - 1){
31.             this.footerLoading = true
32.             Timer.once(Duration.second*3,{=>
33.                         this.footerLoading = false
34.                     })
35.     }
36.     CJTools.log('endNum-list:' + this.carList.size.toString())
37.     })

复制代码

上面代码需要注意的是如何判断列表滑动到了底部，主要是判断数组的长度，在仓颉中数组的长度属性是size，类型是Int64。
以上就是今天的内容分享，感谢阅读。##HarmonyOS语言##仓颉##购物#

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！