HarmonyOS 鸿蒙Next ArkUI 是否提供了下拉刷新组件?
HarmonyOS 鸿蒙Next ArkUI 是否提供了下拉刷新组件?
最新的需求里面要求提供"下拉刷新"拉取最新数据以更新界面的功能, 但是我并没有找到 HarmonyOS NEXT 提供的类似的组件.
想问一下有没有大佬是否知道官方是否提供了下拉刷新功能的组件? 以及社区是否有相关开源组件?
2 回复
1、下拉刷新可以使用Refresh嵌套List来实现,刷新逻辑在onRefreshing回调方法里面执行;上拉加载更多的实现可以给List添加onReachEnd事件回调,当列表滑动到底部的时候触发。示例代码如下:
build() {
Column() {
// 搜索框 置顶
this.searchBarBuilder()
// 下拉刷新组件
Refresh({ refreshing: $$this.isRefreshing }) {
// List组件作为长列表布局
List({ space: 10 }) {
// ListItem 自定义Swiper轮播图模块
ListItem() {
this.bannerBuilder()
}
// ListItem 自定义Grid快接入口模块
ListItem() {
this.quickBuilder()
}
// ListItem 自定义Column秒杀模块
ListItem() {
this.flashBuilder()
}
// ListItemGroup 商品分类列表
this.productsBuilder()
// 最后ListItem 自定义触底加载更多
ListItem() {
this.footerLoadingBuilder()
}.height(50).width('100%').backgroundColor(0xeeeeee)
}
.sticky(StickyStyle.Header)
.height('100%')
// List组件触底模拟网络请求
.onReachEnd(() => {
// 加载更多数据逻辑
})
}
// 下拉刷新模拟网络请求
.onRefreshing(() => {
// 数据刷新逻辑
})
.layoutWeight(1)
.width('100%')
}
}
2、PullToRefresh可用的下拉刷新、上拉加载组件。 可参考链接:https://gitee.com/openharmony-sig/PullToRefresh