ArkTS的List组件如何实现下拉刷新效果?

ArkTS的List组件如何实现下拉刷新效果?

HarmonyOS
6天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
spitter
@State show: boolean = false
@State isRefreshing: boolean = false
@State arr: string[] = []

aboutToAppear(): void {
  for (let index = 0; index < 10; index++) {
    this.arr.push("item" + index)
  }
}

@Builder
customRefreshComponent() {
  Stack() {
    Row() {
      LoadingProgress().height(32)
      Text("正在刷新...").fontSize(16).margin({ left: 20 })
    }
    .alignItems(VerticalAlign.Center)
  }.width("100%").align(Alignment.Center)
  .margin(15)
}

build() {
  Column() {
    Refresh({ refreshing: $$this.isRefreshing, builder: this.customRefreshComponent() }) {
      List() {
        ForEach(this.arr, (item: string) => {
          ListItem() {
            Text('' + item)
              .width('96%')
              .height(100)
              .fontSize(16)
              .textAlign(TextAlign.Center)
              .borderRadius(10)
              .backgroundColor(Color.White)
              .margin({top:10})
          }.width("100%")
        }, (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) => {
      console.info('Refresh onStatueChange state is ' + refreshStatus)
    })
    .onRefreshing(() => {
      //模拟网络请求操作
      setTimeout(() => {
        this.isRefreshing = false
      }, 2000)
      console.log('onRefreshing test')
    })
    .backgroundColor(0x89CFF0)
  }
}

分享
微博
QQ
微信
回复
6天前
相关问题
如何使用Swiper组件实现下拉刷新
173浏览 • 1回复 待解决
Refresh结合lottie实现下拉刷新动画
478浏览 • 1回复 待解决
List组件如何实现多列效果
707浏览 • 1回复 待解决
有谁知道web组件如何下拉刷新
645浏览 • 1回复 待解决
List组件如何设置两端渐变效果
772浏览 • 1回复 待解决
如何实现组件阴影效果
358浏览 • 1回复 待解决
如何实现下载断点续传
645浏览 • 0回复 待解决
滑动组件如何实现单边spring效果
518浏览 • 1回复 待解决
如何实现Tabs组件tarbar吸顶效果
187浏览 • 1回复 待解决
UIAbility如何刷新ArkTS卡片
767浏览 • 1回复 待解决
使用swiper组件实现viewPager效果
518浏览 • 1回复 待解决