HarmonyOS鸿蒙Next ArkUI基础篇-List刷新

HarmonyOS鸿蒙Next ArkUI基础篇-List刷新

对于List组件， 需要上拉加载，下拉刷新，需要Refresh组件来实现

@Entry
@Component
struct UseListPage {
  @State refreshing: boolean = false;
  @State listData: number[] = Array(30).fill(Date.now())

  // 自定义的刷新展示组件
  @Builder
  myRefreshBuilder() {
    Text("正在加载...")
      .width("100%")
      .textAlign(TextAlign.Center)
      .backgroundColor(Color.Gray)
  }

  build() {
    Column() {
      Refresh({ refreshing: $$this.refreshing, builder: this.myRefreshBuilder() }) {
        List() {

          ForEach(this.listData, (data: number, idx: number) => {
            ListItem() {
              Row() {
                Text(data + "")
              }
              .width("80%")
              .padding(20)
              .border({ width: { bottom: 2 }, color: Color.Gray })
            }
          })
        }
      }
    }
    .height('100%')
    .width('100%')
  }
}

一、下拉刷新

下拉后由于没有再修改状态，他会一直处于刷新的状态，这时需要调用Refresh的下拉事件onRefreshing，在处理之后修改刷新的状态

• onRefreshing一般处理的是异步请求，所以这里暂时用定时器模拟一下
• 

@Entry
@Component
struct UseListPage {
  @State refreshing: boolean = false;
  @State listData: number[] = Array(30).fill(Date.now())

  // 自定义的刷新展示组件
  @Builder
  myRefreshBuilder() {
    Text("正在加载...")
      .width("100%")
      .textAlign(TextAlign.Center)
      .backgroundColor(Color.Gray)
  }

  build() {
    Column() {
      Refresh({ refreshing: $$this.refreshing, builder: this.myRefreshBuilder() }) {
        List() {

          ForEach(this.listData, (data: number, idx: number) => {
            ListItem() {
              Row() {
                Text(data + "")
              }
              .width("80%")
              .padding(20)
              .border({ width: { bottom: 2 }, color: Color.Gray })
            }
          })
        }
      }
      .onRefreshing(() => {
        console.log("下拉成功")
        setTimeout(() => {
          this.refreshing = false
          console.log("定时任务触发")
        }, 1000)
      })
    }
    .height('100%')
    .width('100%')
  }
}

二、上拉加载

需要注册三个事件，这三个事件是在List本身

• 开始滚动onScrollStart
• 滚动结束onScrollStop
• 滚动到列表结束的尾部onReachEnd

import { promptAction } from '@kit.ArkUI';

@Entry
@Component
struct UseListPage {
  @State listData: number[] = Array(30).fill(Date.now())
  @State isEnd: boolean = false

  // 自定义的刷新展示组件
  @Builder
  myRefreshBuilder() {
    Text("正在加载...")
      .width("100%")
      .textAlign(TextAlign.Center)
      .backgroundColor(Color.Gray)
  }

  build() {
    Column() {
      List() {

        ForEach(this.listData, (data: number, idx: number) => {
          ListItem() {
            Row() {
              Text(data + "")
            }
            .width("80%")
            .padding(20)
            .border({ width: { bottom: 2 }, color: Color.Gray })
          }
        })
      }
      .onScrollStart(() => {
        this.isEnd = false
      })
      .onScrollStop(() => {
        if (this.isEnd) {
          setTimeout(() => {
            this.listData.push(...Array(10).fill(Date.now()))
            promptAction.showToast({ message: "成功插入十条数据" })
          }, 1000)
        }
      })
      .onReachEnd(() => {
        this.isEnd = true
      })
    }
    .height('100%')
    .width('100%')
  }
}

上拉加载和下拉刷新整合后的代码

import { promptAction } from '@kit.ArkUI';

@Entry
@Component
struct UseListPage {
  @State refreshing: boolean = false;
  @State listData: number[] = Array(30).fill(Date.now())
  @State isEnd: boolean = false

  // 自定义的刷新展示组件
  @Builder
  myRefreshBuilder() {
    Text("正在加载...")
      .width("100%")
      .textAlign(TextAlign.Center)
      .backgroundColor(Color.Gray)
  }

  build() {
    Column() {
      Refresh({ refreshing: $$this.refreshing, builder: this.myRefreshBuilder() }) {
        List() {

          ForEach(this.listData, (data: number, idx: number) => {
            ListItem() {
              Row() {
                Text(data + "")
              }
              .width("80%")
              .padding(20)
              .border({ width: { bottom: 2 }, color: Color.Gray })
            }
          })
        }
        .onScrollStart(() => {
          this.isEnd = false
        })
        .onScrollStop(() => {
          if (this.isEnd) {
            setTimeout(() => {
              this.listData.push(...Array(10).fill(Date.now()))
              promptAction.showToast({ message: "成功插入十条数据" })
            }, 1000)
          }
        })
        .onReachEnd(() => {
          this.isEnd = true
        })
      }
      .onRefreshing(() => {
        console.log("下拉成功")
        setTimeout(() => {
          this.refreshing = false
          console.log("定时任务触发")
        }, 1000)
      })
    }
    .height('100%')
    .width('100%')
  }
}