鸿蒙refrishing下拉刷新,list组件触底刷新

60 阅读1分钟

介绍

在鸿蒙中,可以通过refrish组件实现上拉效果

image.png

可以通过列表的效果实现触底事件,这真的比html的触底事件好用很多

定义状态变量

@State loading:boolean=false//判断加载变量
@State refreshing:boolean=false//下拉刷新变量

绑定事件

 Refresh({refreshing:$$this.refreshing}){
    Column(){
      if(this.taskListData===null){
        Text('没了没了').textAlign(TextAlign.Center).width('100%')
      }else {

        List(){
          if(this.loading===false)
          ForEach(this.taskListData,(item:TaskInfoItem)=>{
            ListItem(){
              TaskItemCard({taskItemData:item})
            }
          })
        }.width('100%').height('100%')
        .onReachEnd(async ()=>{
            this.loading=true
            this.queryParams.page+=1
            await this.getTaskList()
            this.loading=false
            this.refreshing=false
        })

      }

    }

  }.onRefreshing(async ()=>{
    this.loading=true
    this.queryParams.page+=1
    await this.getTaskList()
    this.loading=false
    this.refreshing=false
  })

}