HarmonyOS 下拉刷新 自定义刷新view loading会露出一半距离

代码如下:

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

  build() {
    Column() {
      Refresh({ refreshing: $$this.isRefreshing,builder:this.customRefreshComponent()}) {
        Column(){
          Text('tttttt').height(100)
        }
        .height('100%')
      }
      .onStateChange((refreshStatus: RefreshStatus) => {
        console.info('Refresh onStatueChange state is ' + refreshStatus)
      })
      .onRefreshing(() => {
        setTimeout(() => {
          this.isRefreshing = false
        }, 2000)
        console.log('onRefreshing test')
      })
      .backgroundColor(0x89CFF0)
      .refreshOffset(64)
      .pullToRefresh(true)
    }
  }
}
HarmonyOS
20h前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
shlp

需要去控制loading的显示于隐藏,示例代码如下:

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 arr: String[] = ['0', '1']
  @State refreshString: string = '下拉刷新'
  @Builder
  customRefreshComponent()
  {
    Stack()
    {
      Row()
      {
        if (this.refreshString == '正在刷新...') {
          LoadingProgress().height(32)
        }

        Text("正在刷新...").fontSize(16).margin({left:20})
      }
      .alignItems(VerticalAlign.Center)
    }.width("100%").align(Alignment.Center)
  }

  build() {
    Column() {
      Refresh({ refreshing: $$this.isRefreshing,builder:this.customRefreshComponent()}) {
        Column(){
          Text('tttttt').height(100)
        }
        .height('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.showToast('刷新成功')
          this.refreshString = '刷新成功'
        }
      })
      .onRefreshing(() => {
        setTimeout(() => {
          this.isRefreshing = false
          this.refreshString = '刷新成功'
        }, 2000)
        console.log('onRefreshing test')
      })
      .backgroundColor(0x89CFF0)
      .refreshOffset(64)
      .pullToRefresh(true)
    }
  }
}
分享
微博
QQ
微信
回复
17h前
相关问题
HarmonyOS Refresh自定义刷新样式
37浏览 • 1回复 待解决
HarmonyOS 自定义刷新空间问题
23浏览 • 1回复 待解决
HarmonyOS 自定义弹窗刷新问题
73浏览 • 1回复 待解决
HarmonyOS 下拉刷新功能
225浏览 • 1回复 待解决
HarmonyOS 首页下拉刷新异常
351浏览 • 1回复 待解决
HarmonyOS 组件的下拉刷新问题
512浏览 • 1回复 待解决