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)
    }
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
HarmonyOS
2024-12-26 13:47:41
浏览
收藏 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)
    }
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
分享
微博
QQ
微信
回复
2024-12-26 17:09:41
相关问题
HarmonyOS Refresh自定义刷新样式
838浏览 • 1回复 待解决
HarmonyOS 自定义刷新空间问题
612浏览 • 1回复 待解决
HarmonyOS 自定义弹窗刷新问题
713浏览 • 1回复 待解决
HarmonyOS 下拉刷新功能
756浏览 • 1回复 待解决
HarmonyOS 下拉刷新如何实现
522浏览 • 1回复 待解决