基于PullToRefresh实现横向下拉刷新与加载更多

基于PullToRefresh实现横向下拉刷新与加载更多

HarmonyOS
2024-05-26 11:12:41
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
开心的兔子

本文PullToRefresh实现横向下拉刷新与加载更多

使用的核心API

pulltorefresh

核心代码解释

1. 自定义组件PullToRefreshHorizontal来包装List

 PullToRefreshHorizontal({ 
        // 必传项,列表组件所绑定的数据 
        data: $data, 
        // 必传项,需绑定传入主体布局内的列表或宫格组件 
        scroller: this.scroller, 
        // 必传项,自定义主体布局,内部有列表或宫格组件 
        customList: () => { 
          // 一个用@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, 
      }) 
        .direction(Direction.Rtl) 
        // .direction(Direction.Ltr)

2.  使用List加载数据。

 @Builder 
  private getListView() { 
    List({ space: 20, scroller: this.scroller }) { 
      ForEach(this.data, (item: string) => { 
        ListItem() { 
          Text(item) 
            .width(160) 
            .height(150) 
            .fontSize(20) 
            .textAlign(TextAlign.Center) 
            .backgroundColor('#95efd2') 
        } 
      }) 
    } 
    .listDirection(Axis.Horizontal) 
    .backgroundColor('#eeeeee') 
    .divider({ strokeWidth: 1, color: 0x222222 }) 
    .edgeEffect(EdgeEffect.None) // 必须设置列表为滑动到边缘无效果 
  }

3. PullToRefreshHorizontal实现:

  private getTranslateXOfRefresh(newTranslateX: number): number { 
    if (this.refreshConfigurator !== undefined) { 
      let maxTranslateX = this.refreshConfigurator.getMaxTranslate(); 
      let sensitivity = this.refreshConfigurator.getSensitivity(); 
      if (maxTranslateX !== undefined && sensitivity !== undefined && this.trXTop !== undefined) { 
        // 阻尼值计算 
        if (this.trXTop / maxTranslateX < 0.2) { 
          newTranslateX = newTranslateX * 1 * sensitivity; 
        } else if (this.trXTop / maxTranslateX < 0.4) { 
          newTranslateX = newTranslateX * 0.8 * sensitivity; 
        } else if (this.trXTop / maxTranslateX < 0.6) { 
          newTranslateX = newTranslateX * 0.6 * sensitivity; 
        } else if (this.trXTop / maxTranslateX < 0.8) { 
          newTranslateX = newTranslateX * 0.4 * sensitivity; 
        } else { 
          newTranslateX = newTranslateX * 0.2 * sensitivity; 
        } 
        // 下拉值计算 
        if (this.trXTop + newTranslateX > maxTranslateX) { 
          return maxTranslateX; 
        } else if (this.trXTop + newTranslateX < 0) { 
          return 0; 
        } else { 
          return this.trXTop + newTranslateX; 
        } 
      } 
    } 
    return 0; 
  }

适配的版本信息

IDE版本:4.0.1.501

SDK版本:4.0.10.8

分享
微博
QQ
微信
回复
2024-05-27 10:59:26
相关问题
刷新列表加载更多问题
328浏览 • 1回复 待解决
上拉加载下拉刷新组件
437浏览 • 1回复 待解决
Refresh结合lottie实现下拉刷新动画
1123浏览 • 1回复 待解决
HarmonyOS ArkWeb如何实现下拉刷新功能
516浏览 • 1回复 待解决
如何使用Swiper组件实现下拉刷新
830浏览 • 1回复 待解决