HarmonyOS 组件的下拉刷新问题

没有scorller的组件如何下拉刷新,例如一个Text组件,如何实现下拉刷新,文档中的Refresh组件都是和List绑定使用,还有系统组件如何支持上拉加载?

自定义的refresh组件支持下拉刷新和上拉加载,通过判断scroller的偏移量来布局UI,但Text没有scroller,这种如何稍显下拉刷新

有没有官方的同时支持下拉刷新和上拉加载的demo。

HarmonyOS
2024-09-26 12:55:37
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zbw_apple

示例如下:

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)  
@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) // 必须设置列表为滑动到边缘无效果  
}  
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;  
}
分享
微博
QQ
微信
回复
2024-09-26 17:37:10
相关问题
HarmonyOS使用Refresh下拉刷新问题
836浏览 • 1回复 待解决
HarmonyOS 数据刷新问题
5浏览 • 1回复 待解决
HarmonyOS 页面刷新问题
290浏览 • 1回复 待解决
HarmonyOS 列表刷新问题
594浏览 • 1回复 待解决
HarmonyOS UI 未刷新问题
500浏览 • 0回复 待解决
HarmonyOS 页面跳转刷新问题
813浏览 • 1回复 待解决
HarmonyOS List item 刷新问题
735浏览 • 1回复 待解决
NativeWindowFlushBuffer接口刷新问题
1973浏览 • 1回复 待解决
HarmonyOS 装饰器不刷新问题
153浏览 • 1回复 待解决
HarmonyOS 二维数组刷新问题
295浏览 • 1回复 待解决
HarmonyOS 状态变量不刷新问题
437浏览 • 1回复 待解决
上拉加载,下拉刷新组件
412浏览 • 1回复 待解决
HarmonyOS 下拉刷新功能
201浏览 • 1回复 待解决
如何使用Swiper组件实现下拉刷新
789浏览 • 1回复 待解决
HarmonyOS 首页下拉刷新异常
306浏览 • 1回复 待解决