[Harmony OS] [ARK UI] List of ETS implements pull-down refresh function implementation

List pull-down refresh is a very common problem in HarmonyOS development. Today, I describe how to implement the function of List pull-down refresh. It is mainly divided into "development preparation", "code implementation", and "operation effect"

1. To prepare for development, we need to learn the following knowledge points

   1.1 [Harmony OS] [ARK UI] [Demo] Loading animation implementation 

   1.2 PanGesture

   1.3 List ListItem  

   1.4 Explicit and implicit control 

2.  

   Code

   2.1 Prepare data source
   Define full data source: used to load partial data each time
   Define List display data source: used for List display on the interface The code is as follows

    

   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 Use List and ListItem , [Harmony OS] [ARK UI] [Demo] to load the animation implementation to draw the basic interface, the code is as follows  

   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 Control the display or hide of the loading animation
   We can learn the display and hide control to control the display and hide of the loading animation, and define a global variable to control the display and hide of the animation. The code is as follows

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

   

    

   2.4 Control List pull-down refresh animation
   Refresh threshold: only when the visible index of the first screen of the List is 0, and the data is loaded when the upper and lower pull-down
   is released. The visible index of the first screen of the List is obtained. Api, and define a variable to get the value The code is as follows

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

   2.5 Gesture judgment, we refer to the PanGesture document, the code is as follows

     .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 Refresh data code is as follows
   //Network load data

     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. Running effect
   3.1 All the codes are as follows

   @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 The running effect diagram is as follows

   

{{o.name}}

{{m.name}}