HarmonyOS 鸿蒙Next 有没有上拉加载下拉刷新的demo

HarmonyOS 鸿蒙Next 有没有上拉加载下拉刷新的demo

有没有上拉加载下拉刷新的demo  

 

2 回复

可以使用三方库PullToRefresh来完成这种场景
链接:https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Fpulltorefresh

import { PullToRefresh } from '[@ohos](/user/ohos)/pulltorefresh'

[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index {
 [@State](/user/State)  refreshText: string = '';
 private dataNumbers: string[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
 private dataStrings: string[] = ['我的评论', '与我相关', '个人中心1', '个人中心2', '个人中心3', '我的发布', '设置', '退出登录'];
 [@State](/user/State)  data: string[] = this.dataStrings;
 // 需绑定列表或宫格组件
 private scroller: Scroller = new Scroller();
 build() {
   Column() {
     PullToRefresh({
       // 必传项,列表组件所绑定的数据
       data: $data,
       // 必传项,需绑定传入主体布局内的列表或宫格组件
       scroller: this.scroller,
       // 必传项,自定义主体布局,内部有列表或宫格组件
       customList: () => {
         // 一个用[@Builder](/user/Builder)修饰过的UI方法
         this.getListView();
       },
       // 可选项,下拉刷新回调
       onRefresh: () => {
         return new Promise<string>((resolve, reject) => {
           // 模拟网络请求操作,请求网络2秒后得到数据,通知组件,变更列表数据
           setTimeout(() => {
             resolve('刷新成功');
             this.data = this.dataNumbers;
           }, 2000);
         });
       },
       // 可选项,上拉加载更多回调
       onLoadMore: () => {
         return new Promise<string>((resolve, reject) => {
           // 模拟网络请求操作,请求网络2秒后得到数据,通知组件,变更列表数据
           setTimeout(() => {
             resolve('');
             this.data.push("增加的条目" + this.data.length);
           }, 2000);
         });
       },
       customLoad: null,
       customRefresh: null,
     })
   }
 }
 [@Builder](/user/Builder)
 private getListView() {
   List({ space: 20, scroller: this.scroller }) {
     ForEach(this.data, (item: string) => {
       ListItem() {
         Text(item)
           .width('100%')
           .height(150)
           .fontSize(20)
           .textAlign(TextAlign.Center)
           .backgroundColor('#95efd2')
       }
     })
   }
   .backgroundColor('#eeeeee')
   .divider({ strokeWidth: 1, color: 0x222222 })
   .edgeEffect(EdgeEffect.None) // 必须设置列表为滑动到边缘无效果
 }
}

更多关于HarmonyOS 鸿蒙Next 有没有上拉加载下拉刷新的demo的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


HarmonyOS 鸿蒙Next确实提供了上拉加载和下拉刷新的demo。这些功能在移动端应用中非常常见,能够显著提升用户体验。

在HarmonyOS鸿蒙Next中,实现下拉刷新和上拉加载功能通常涉及对触摸事件的监听和处理。开发者可以通过监听touchstart、touchmove和touchend等事件,来判断用户的下拉和上拉动作,并据此触发相应的刷新和加载逻辑。具体来说,下拉刷新通常是在用户处于页面顶部时,通过下拉动作触发;而上拉加载则是在用户滚动到页面底部时触发。

HarmonyOS鸿蒙Next可以使用第三方库(如PullToRefresh组件)来实现这些功能,第三方库通常提供了更简便的API和更丰富的动画效果,能够加速开发进程。同时,HarmonyOS的官方文档和开发者社区也提供了相关的资源,以获取更多的帮助和指导。

您可以通过访问HarmonyOS开发者社区的Gitee仓库获取相关demo代码。

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

回到顶部