HarmonyOS 组件的下拉刷新问题

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

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

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

HarmonyOS
9天前
浏览
收藏 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
微信
回复
9天前
相关问题
HarmonyOS使用Refresh下拉刷新问题
324浏览 • 1回复 待解决
HarmonyOS 列表刷新问题
224浏览 • 1回复 待解决
HarmonyOS 页面跳转刷新问题
301浏览 • 1回复 待解决
HarmonyOS List item 刷新问题
343浏览 • 1回复 待解决
NativeWindowFlushBuffer接口刷新问题
1706浏览 • 1回复 待解决
HarmonyOS 状态变量不刷新问题
101浏览 • 1回复 待解决
上拉加载,下拉刷新组件
103浏览 • 1回复 待解决
如何使用Swiper组件实现下拉刷新
499浏览 • 1回复 待解决
有谁知道web组件如何下拉刷新
1783浏览 • 1回复 待解决
HarmonyOS ArkWeb如何实现下拉刷新功能
165浏览 • 1回复 待解决
HarmonyOS List组件动态刷新数据问题
186浏览 • 1回复 待解决
HarmonyOS Grid容器视图更新问题
215浏览 • 1回复 待解决