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

简介: 本文介绍了在仓颉开发语言中实现下拉刷新和上拉加载更多的方法。通过Refresh组件实现下拉刷新,结合Timer模拟网络加载;并通过监听列表滚动事件,在列表底部添加加载动画实现上拉加载更多功能。代码示例清晰实用,适用于商城等含列表交互的移动应用开发。

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

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

@State var headerLoading : Bool = false; 

Refresh(RefreshParams(refreshing: @Binder(this.headerLoading))) {
List{
        ForEach(this.carList,
        itemGeneratorFunc:{

            item:CarItem, index: Int64 => ListItem {
            }
            })
    }
}
.onRefreshing({ => 
    Timer.once(Duration.second*2,{=>
            this.headerLoading = false
           })
    AppLog.info('onRefreshing')
    })
.onStateChange({state =>
     AppLog.info('onStateChange')
    })

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

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

@State var footerLoading:Bool = false

List{
    ForEach(this.carList,
        itemGeneratorFunc:{

            item:CarItem, index: Int64 => ListItem {
            }
            })

    ListItem {
        if(this.footerLoading){
            Row(12){
                LoadingProgress()
                .height(40)
                .width(40)

                Text('加载中...')
                .fontSize(14)
                .fontColor(Color.GRAY)
            }
            .width(100.percent)
            .height(50)
            .alignItems(VerticalAlign.Center)
            .justifyContent(FlexAlign.Center)
        }
    }
}
.onScrollIndex({startNum,endNum =>
    if(Int64(endNum) >= this.carList.size - 1){
            this.footerLoading = true
            Timer.once(Duration.second*3,{=>
                        this.footerLoading = false
                    })
    }
    CJTools.log('endNum-list:' + this.carList.size.toString())
    })

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

相关文章
|
7天前
|
JavaScript 开发者 索引
鸿蒙应用开发从入门到实战(九):ArkTS渲染控制
ArkTS拓展了TypeScript,可以结合ArkUI进行渲染控制,是的界面设计具有可编程性。本文简要描述鸿蒙应用开发中的条件渲染和循环渲染。
|
4天前
|
数据安全/隐私保护 开发者
鸿蒙应用开发从入门到实战(十一):ArkUI组件Text&TextInput
ArkUI提供了丰富的系统组件,用于制作鸿蒙原生应用APP的UI,本文主要讲解文本组件Text和TextInput的使用。
|
3天前
|
开发者
鸿蒙应用开发从入门到实战(十二):ArkUI组件Button&Toggle
ArkUI提供了丰富的系统组件,用于制作鸿蒙原生应用APP的UI,本文主要讲解按钮组件Button和Toggle的使用。
|
8天前
|
JavaScript
鸿蒙应用开发从入门到实战(八):ArkTS自定义组件语法
ArkUI除系统预置的组件外,还支持自定义组件。使用自定义组件,可使代码的结构更加清晰,并且能提高代码的复用性。
|
5天前
|
存储 编解码 JSON
鸿蒙应用开发从入门到实战(十):ArkUI图片组件Image
ArkUI提供了丰富的系统组件,用于制作鸿蒙原生应用APP的UI,本文主要讲解Image图片组件的使用。
|
9天前
|
存储 缓存 5G
鸿蒙 HarmonyOS NEXT端云一体化开发-云存储篇
本文介绍用户登录后获取昵称、头像的方法,包括通过云端API和AppStorage两种方式,并实现上传头像至云存储及更新用户信息。同时解决图片缓存问题,添加上传进度提示,支持自动登录判断,提升用户体验。
54 0
|
9天前
|
存储 负载均衡 数据库
鸿蒙 HarmonyOS NEXT端云一体化开发-云函数篇
本文介绍基于华为AGC的端云一体化开发流程,涵盖项目创建、云函数开通、应用配置及DevEco集成。重点讲解云函数的编写、部署、调用与传参,并涉及环境变量设置、负载均衡、重试机制与熔断策略等高阶特性,助力开发者高效构建稳定云端服务。
76 0
鸿蒙 HarmonyOS NEXT端云一体化开发-云函数篇
|
9天前
|
存储 JSON 数据建模
鸿蒙 HarmonyOS NEXT端云一体化开发-云数据库篇
云数据库采用存储区、对象类型、对象三级结构,支持灵活的数据建模与权限管理,可通过AGC平台或本地项目初始化,实现数据的增删改查及端侧高效调用。
34 0
|
9天前
|
存储 开发者 容器
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
本文介绍了ArkTS语言中的Class类、泛型、接口、模块化、自定义组件及状态管理等核心概念,并结合代码示例讲解了对象属性、构造方法、继承、静态成员、访问修饰符等内容,同时涵盖了路由管理、生命周期和Stage模型等应用开发关键知识点。
78 0
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
|
9天前
鸿蒙 HarmonyOS NEXT星河版APP应用开发-阶段三
本文介绍了UI开发中的样式复用与组件构建技术,涵盖@Extend、@Styles和@Builder的使用方法,并通过Swiper轮播、Scroll滚动、Tabs导航等常用组件实现典型界面效果,结合生肖抽卡、小米轮播、回顶按钮等案例,展示实际应用技巧。
51 0