刷新显示状态,希望自定义一个刷新组件,通过刷新状态的不同显示不同字段包括下拉刷新,释放刷新

希望自定义一个刷新组件,通过刷新状态的不同显示不同字段包括下拉刷新,释放刷新,刷新中和刷新结束的字段。

  • onStateChange
  • onRefreshing


HarmonyOS
2024-05-23 23:37:48
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
热辣牛奶

通过Refresh下拉刷新的不同回调值,使用switch-case判断返回不同的效果,其中刷新中使用状态变量来控制显示的字样,模拟刷新之后的数据回调之后显示刷新结束。

@Entry 
@Component 
struct RefreshExample { 
  @State isRefreshing: boolean = false 
  @State arr: String[] = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10'] 
  @State status: RefreshStatus = RefreshStatus.Inactive; 
  @State close: RefreshStatus = RefreshStatus.Refresh 
  @State msg: string = '刷新中'; 
  
  @Builder 
  customRefreshComponent() { 
    Stack() { 
      Row() { 
        LoadingProgress().height(32) 
        Text(this.getRefreshText()).fontSize(16).margin({ left: 20 }) 
      } 
      .alignItems(VerticalAlign.Center) 
    }.width("100%").align(Alignment.Center).height(30) 
  } 
  
  getRefreshText(): string { 
    switch (this.status) { 
      case RefreshStatus.Drag: 
        return '下拉刷新' as string 
      case RefreshStatus.OverDrag: 
        return '释放开始刷新'; 
      case RefreshStatus.Refresh: 
        return this.msg; 
      // case RefreshStatus.Done: 
      //   return '刷新结束'; 
      default: 
        return '下拉刷新' as string 
    } 
  } 
  
  build() { 
    Column() { 
      Refresh({ refreshing: $$this.isRefreshing, builder: this.customRefreshComponent() }) { 
        List() { 
          ForEach(this.arr, (item: string) => { 
            ListItem() { 
              Text('' + item) 
                .width('100%') 
                .height(100) 
                .fontSize(16) 
                .textAlign(TextAlign.Center) 
                .borderRadius(10) 
                .backgroundColor(0xFFFFFF) 
            } 
          }, (item: string) => item) 
        } 
        .onScrollIndex((first: number) => { 
          console.info(first.toString()) 
        }) 
        .width('100%') 
        .height('100%') 
        .divider({ strokeWidth: 1, color: Color.Yellow, startMargin: 10, endMargin: 10 }) 
        .scrollBar(BarState.Off) 
      } 
      .onStateChange((refreshStatus: RefreshStatus) => { 
        this.status = refreshStatus 
        setTimeout(() => { 
          this.msg='刷新结束' 
        }, 1850) 
        console.info('Refresh onStatueChange state is ' + refreshStatus) 
      }) 
      .onRefreshing(() => { 
        setTimeout(() => { 
          this.isRefreshing = false 
        }, 2000) 
        console.log('onRefreshing test') 
      }) 
      .backgroundColor(0x89CFF0) 
    } 
  } 
}

注明适配的版本信息

IDE: 4.1.1.300

SDK: 4.0.10.15

分享
微博
QQ
微信
回复
2024-05-24 23:23:07
相关问题
HarmonyOS 组件下拉刷新问题
512浏览 • 1回复 待解决
HarmonyOS Refresh自定义刷新样式
15浏览 • 1回复 待解决
HarmonyOS 自定义刷新空间问题
12浏览 • 1回复 待解决
上拉加载,下拉刷新组件
447浏览 • 1回复 待解决
HarmonyOS 自定义弹窗刷新问题
69浏览 • 1回复 待解决
状态装饰器 ui不刷新问题
2471浏览 • 1回复 待解决
前端手动刷新显示Rdb数据
841浏览 • 1回复 待解决
HarmonyOS 下拉刷新功能
224浏览 • 1回复 待解决
HarmonyOS rn组件FlatList下拉刷新异常
20浏览 • 1回复 待解决
UI预览不会自动刷新, 且刷新较慢
695浏览 • 1回复 待解决