HarmonyOS Refresh自定义刷新样式

怎么自定义下拉刷新样式？怎么监听下拉和刷新中状态？有demo吗？

HarmonyOS

put_get

2024-12-24 17:05:15

浏览

回答 1

待解决

回答 1

按赞同

按时间

Heiang

示例代码如下：

// xxx.ets
@Entry
@Component
struct RefreshPage {
  @State isRefreshing: boolean = false
  @State arr: String[] = ['0', '1', '2', '3', '4','5','6','7','8','9','10']
  @State refreshString: string = '下拉刷新'
  @Builder
  customRefreshComponent()
  {
    Stack()
    {
      Row()
      {
        LoadingProgress().height(32)
        Text("正在刷新...").fontSize(16).margin({left:20})
      }
      .alignItems(VerticalAlign.Center)
    }.width("100%").align(Alignment.Center).layoutWeight(1)
  }

  build() {
    Column() {
      Refresh({ refreshing: $$this.isRefreshing,builder:this.customRefreshComponent()}) {
        List() {
          ListItem() {
            Text('北京').fontSize(24)
          }
          ListItem() {
            Text('杭州').fontSize(24)
          }
          ListItem() {
            Text('上海').fontSize(24)
          }
        }
        .backgroundColor(Color.Transparent)
        .alignListItem(ListItemAlign.Center)
        .height('100%')
        .width('100%')
      }
      .onStateChange((refreshStatus: RefreshStatus) => {
        if(refreshStatus == 1){
          this.refreshString = '下拉刷新'
        } else if (refreshStatus == 2){
          this.refreshString = '松手刷新'
        }else if (refreshStatus == 3){
          this.refreshString = '正在刷新...'
        }else if (refreshStatus == 4){
          this.refreshString = '刷新成功'
        }
      })
      .onRefreshing(() => {
        setTimeout(() => {
          this.isRefreshing = false
          this.refreshString = '刷新成功'
        }, 2000)
        console.log('onRefreshing test')
      })
      .backgroundColor(0x89CFF0)
      .height('100%')
    }
  }
}

详情请参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-refresh-V5