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

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

  • onStateChange
  • onRefreshing


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

通过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
相关问题
前端手动刷新显示Rdb数据
414浏览 • 1回复 待解决
如何使用Swiper组件实现下拉刷新
144浏览 • 1回复 待解决
状态装饰器 ui不刷新问题
1104浏览 • 1回复 待解决
有谁知道web组件如何下拉刷新
528浏览 • 1回复 待解决
如何获取组件刷新时间
600浏览 • 1回复 待解决
Refresh结合lottie实现下拉刷新动画
451浏览 • 1回复 待解决
UIAbility如何刷新ArkTS卡片
688浏览 • 1回复 待解决
NativeWindowFlushBuffer接口刷新问题
449浏览 • 1回复 待解决
下拉刷新和上拉加载API为9sdk
1339浏览 • 1回复 待解决
Swiper 组件嵌套图片刷新数据会闪烁
287浏览 • 1回复 待解决
IF条件变化后UI不刷新
171浏览 • 1回复 待解决
卡片数据刷新时间如何支持配置
597浏览 • 1回复 待解决