【Harmony OS】【ARK UI】ETS 的 List 实现下拉刷新功能实现

在HarmonyOS开发中List下拉刷新是一种很常见的问题，今天描述怎么实现List下拉刷新的功能实现，主要分为“开发准备”，“代码实现”，“运行效果”

1. 开发准备 我们需要学习以下知识点

1.1 【Harmony OS】【ARK UI】【Demo】加载动画实现

1.2 PanGesture

1.3 List ListItem

1.4 显隐控制

 

2. 代码实现

2.1 准备数据源

定义全量数据源：用于加载每次加载部分数据

定义List显示数据源：用于List显示在界面上 代码如下

private arr: string[] = ["A", "B", "C", "D", "E", "F", "G", "H"] //todo 当前list显示数据源
private AllData: string[] = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"] //todo 全量数据

2.2 使用 List 和ListItem，【Harmony OS】【ARK UI】【Demo】加载动画实现来 绘画基本界面，代码如

Column() {
      List({ space: 20, initialIndex: 0 }) {
        ListItem() {
          Column() {
            Image($r("app.media.loading"))
              .objectFit(ImageFit.Contain)
              .height(40)
              .aspectRatio(1)
              .width(40)
              .margin({ bottom: 5 })
              .rotate({ x: 0, y: 0, z: 1, angle: this.rotateAngle })
            Text(this.loadingText)
              .fontSize(14)
              .fontColor("#ed6262")
              .backgroundColor(Color.White)
          }
          .alignItems(HorizontalAlign.Center)
          .padding({ top: 10, right: 0, bottom: 10, left: 0 })
          .width("100%")
          .padding({ top: 10, right: 0, bottom: 10, left: 0 })
          .backgroundColor(Color.White)
        }

        ForEach(this.arr, (item) => {
          ListItem() {
            Text('' + item)
              .width('100%')
              .height(100)
              .fontSize(16)
              .textAlign(TextAlign.Center)
              .borderRadius(10)
              .backgroundColor(0xFFFFFF)
          }
        }, item => item)
      }
      .listDirection(Axis.Vertical) // 排列方向
      .onScrollIndex((firstIndex: number, lastIndex: number) => {
        //Todo firstIndex屏幕第一个可见条目索引
        //todo lastIndex屏幕最后可见索引
        this.firstIndex = firstIndex;
      })
 
}.width('100%')

2.3 控制加载动画显示或者隐藏

我们可以学习显隐控制来控制加载动画显示隐藏，定义一个全局变量来进行控制动画显示隐藏，代码如下

  @State IsShowLoading: boolean= true//动画显示隐藏 默认是显示状态
  .visibility((this.IsShowLoading ? Visibility.Visible : Visibility.None))//Todo 动画显示隐藏

2.4 控件List下拉刷新动画

刷新临界值：只用当List第一条屏幕可见索引为0的时候，并且上下拉松开的时候开始加载数据

List第一条屏幕可见索引获取，我们参List的onScrollIndex的Api，并且定义一个变量进行获取到值 代码如下

.onScrollIndex((firstIndex: number, lastIndex: number) => {
//Todo firstIndex屏幕第一个可见条目索引
//todo lastIndex屏幕最后可见索引
this.firstIndex = firstIndex;
})

2.5 手势判断，我们参考PanGesture文档，代码如下

  .parallelGesture(
      PanGesture({ distance: 150, direction: PanDirection.Down })
        .onActionStart(this.ActionStart.bind(this))
        .onActionUpdate(this.ActionUpdate.bind(this))
        .onActionEnd(this.ActionEnd.bind(this))
        .onActionCancel(this.ActionCancel.bind(this))
      )

   public ActionStart(event) {
    clearInterval(this.rotateTimeOut)
    if (this.firstIndex === 0 && this.arr.length > 0) { //判断是否刷新
      this.IsShowLoading = true;
      this.loadingText = "开始刷新"
    }
  }

  private ActionUpdate() {
    clearInterval(this.rotateTimeOut)//Todo 取消之前动画
    this.loadingText = "正在刷新"
    console.log(this.loadingText)

  }

  private ActionEnd() {
    this.loadingText = "开始刷新数据"
    console.log(this.loadingText)
    //开始刷新数据



    this.loadingRotate();
    this.loadingData(); //加载数据
  }

  private ActionCancel() {
    //取消动画
    this.IsShowLoading = false;
    this.loadingText = "刷新取消"
    console.log(this.loadingText)
    clearInterval(this.rotateTimeOut)
  }

2.6刷新数据代码如下

//网络加载数据

  private loadingData() {
    console.log("loadingData=====")
    var that = this;
    //延迟几秒执行这个代码 取消动画
    setTimeout(function () {
      console.log("loadingData=====开始")
      var random=Math.ceil(Math.random()*10);;
      that.arr.splice(0,8)
      for(var i=random;i<random+8;i++){
        that.arr.push(that.AllData[i])
      }
      console.log("loadingData=====clearInterval")
      clearInterval(this.rotateTimeOut)
      console.log("loadingData===取消动画")
      that.IsShowLoading = false
    }, 5000)
  }

3.运行效果

3.1全部代码如下

@Entry
@Component
struct MyListView {
  private arr: string[] = ["A", "B", "C", "D", "E", "F", "G", "H"] //todo 当前数据源
  private AllData: string[] = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]
  private firstIndex: number= 0;
//-1 代表正常状态 0代表下拉刷新 1 代表上拉加载
  @State loadingText: string = '正在刷新' //文本
  @State IsShowLoading: boolean= true//动画显示隐藏 默认是显示状态
  private rotateTimeOut: any //计时器
  @State rotateAngle: number= 0;
//加载图标旋转
  loadingRotate() {
    this.rotateTimeOut = setInterval(() => {
      this.rotateAngle = 0
      animateTo({ duration: 800 }, () => {
        this.rotateAngle = 360
      })
    }, 800)
  }

  public ActionStart(event) {
    clearInterval(this.rotateTimeOut)
    if (this.firstIndex === 0 && this.arr.length > 0) { //判断是否刷新
      this.IsShowLoading = true;
      this.loadingText = "开始刷新"
    }
  }

  private ActionUpdate() {
    clearInterval(this.rotateTimeOut)//Todo 取消之前动画
    this.loadingText = "正在刷新"
    console.log(this.loadingText)

  }

  private ActionEnd() {
    this.loadingText = "开始刷新数据"
    console.log(this.loadingText)
    //开始刷新数据



    this.loadingRotate();
    this.loadingData(); //加载数据
  }

  private ActionCancel() {
    //取消动画
    this.IsShowLoading = false;
    this.loadingText = "刷新取消"
    console.log(this.loadingText)
    clearInterval(this.rotateTimeOut)
  }
//网络加载数据
  private loadingData() {
    console.log("loadingData=====")
    var that = this;
    //延迟几秒执行这个代码 取消动画
    setTimeout(function () {
      console.log("loadingData=====开始")
      var random=Math.ceil(Math.random()*10);;
      that.arr.splice(0,8)
      for(var i=random;i<random+8;i++){
        that.arr.push(that.AllData[i])
      }
      console.log("loadingData=====clearInterval")
      clearInterval(this.rotateTimeOut)
      console.log("loadingData===取消动画")
      that.IsShowLoading = false
    }, 5000)
  }

  build() {
    Column() {
      List({ space: 20, initialIndex: 0 }) {
        ListItem() {
          Column() {
            Image($r("app.media.loading"))
              .objectFit(ImageFit.Contain)
              .height(40)
              .aspectRatio(1)
              .width(40)
              .margin({ bottom: 5 })
              .rotate({ x: 0, y: 0, z: 1, angle: this.rotateAngle })
            Text(this.loadingText)
              .fontSize(14)
              .fontColor("#ed6262")
              .backgroundColor(Color.White)
          }
          .alignItems(HorizontalAlign.Center)
          .padding({ top: 10, right: 0, bottom: 10, left: 0 })
          .width("100%")
          .padding({ top: 10, right: 0, bottom: 10, left: 0 })
          .backgroundColor(Color.White)
        }
        .visibility((this.IsShowLoading ? Visibility.Visible : Visibility.None))//Todo 动画显示隐藏

        ForEach(this.arr, (item) => {
          ListItem() {
            Text('' + item)
              .width('100%')
              .height(100)
              .fontSize(16)
              .textAlign(TextAlign.Center)
              .borderRadius(10)
              .backgroundColor(0xFFFFFF)
          }
        }, item => item)
      }
      .listDirection(Axis.Vertical) // 排列方向
      .onScrollIndex((firstIndex: number, lastIndex: number) => {
        //Todo firstIndex屏幕第一个可见条目索引
        //todo lastIndex屏幕最后可见索引
        this.firstIndex = firstIndex;
      })
      .parallelGesture(
      PanGesture({ distance: 150, direction: PanDirection.Down })
        .onActionStart(this.ActionStart.bind(this))
        .onActionUpdate(this.ActionUpdate.bind(this))
        .onActionEnd(this.ActionEnd.bind(this))
        .onActionCancel(this.ActionCancel.bind(this))
      )
    }.width('100%')


  }
}

3.2运行效果图如下