文章目录

前言

一、场景解说

二、使用到的技术

三、具体的代码逻辑实现

总结

前言

HarmonyOS业务场景实现所需要用的技术实现。

一、场景解说

在鸿蒙开发过程，有很多场景都要是需要通过不断刷新和触底加载的技术实现业务

二、使用到的技术

1：使用滚动容器List和List的事件onReachEnd()事件来监听触底时需要触发的业务逻辑

2：需要使用fresh()容器，此容器只有子组件，并需要传入一个对象参数，使用此容器的onFreshing事件来监听上拉刷新的动作。

三、具体的代码逻辑实现

第一步：创建一个组件，实现基本架构

@Entry
@Component
struct RefreshPage {
第二步：定义变量
@State isRefreshing:boolean=false  //用来控制触发刷新
@State isReachEndLoading:boolean=false  //用来控制触底加载
@State isFinished:boolean=false  //控制加载完数据。数据库有100条，现在加载了100条@State page: number = 1  //定义查询页数
@State list: QuestionItem[] = []


 第三步：封装刷新的业务逻辑  
//因为是要调用后端接口，所以需要用到异步操作，所以用了asyn和await关键字
async onFresh() {
  this.page = 1
//调用后端接口返回需要渲染的数据
  const res = await this.getQuestionList()
//获得后端返回的数据总条数
  this.list = res.rows

  //查询完毕就关闭下拉刷新
  this.isRefreshing = false

  //当出现加载完了所有的数据时
  if (this.list.length == res.total) {
    this.isFinished = true
  } else {
    //关闭加载完成
    this.page++
    this.isFinished = false
  }
}
 第四步：封住触底加载的业务逻辑
async onLoad() {
  //加载时先打开开关
  this.isLoading = true
  //获取数据进行赋值操作
  const res = await this.getQuestionList()
  this.list.push(...res.rows)
  //加载完毕关闭开关
  this.isLoading = false
 //当出现加载完了所有的数据时
  if (this.list.length == res.total) {
    this.isFinished = true
  } else {
    this.page++
  }
}
  build() {
    Refresh({refreshing:$$this.isRefreshing}){
      List(){
        ListItem(){
          Text() 
        }
      }.onReachEnd(()=>{
        //实现触底加载的业务逻辑
        if(this.isReachEndLoading || this.isFinished|| this.isRefreshing){
          return
        }else{
          this.onLoad()
        }
      })
    }.onRefreshing(()=>{
      //实现上拉刷新业务逻辑
        this.onFresh()
    })
  }
}

总结

本文主要介绍在日常鸿蒙开发中，需要实现上拉刷新，下拉加载的业务逻辑的具体实现过程，其中设计到list容器的onReachEnd()事件和refresh()容器的刷新事件onFreshing(),并涉及到向后端发布http请求的方法，具体的http请求和封装将会在下一个章节讲解和实现。