HarmonyOS 鸿蒙Next ArkUI 是否提供了下拉刷新组件?

发布于 1周前 作者 h691938207 来自 鸿蒙OS

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

HarmonyOS 鸿蒙Next ArkUI 确实提供了下拉刷新组件

ArkUI作为鸿蒙Next系统的UI开发框架,致力于提供一套简洁、高效、易用的开发工具,以帮助开发者快速构建出高质量的用户界面。在ArkUI中,开发者可以通过封装或引入相关组件来实现下拉刷新的功能。具体来说,基于ArkUI可以封装出支持上拉下拉刷新的组件,该组件不仅适用于List列表,还支持Grid网格、WaterFlow瀑布流以及各种自定义组件的刷新。同时,开发者还可以自定义刷新header和footer的样式,以及插入头部和底部信息。

因此,如果你正在使用HarmonyOS 鸿蒙Next进行开发,并需要实现下拉刷新的功能,可以直接在ArkUI框架中找到或封装相应的组件来满足需求。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部