简介

Refresh( )是鸿蒙开发中常用的一种容器组件，可以实现下拉刷新、上划加载更多（可以结合 List组件）的功能。

Refresh( ) 组件支持单个子组件。

该组件的完整使用方法请参考官方文档：Refresh( )组件

使用方法

1、参数

名称	类型	必填	说明
refreshing	boolean	是	组件当前是否处于刷新中状态。true表示处于刷新中状态，false表示未处于刷新中状态。 默认值：false 该参数支持 $$ 双向绑定变量。
builder	CustomBuilder	否	自定义刷新区域显示内容。
promptText	ResourceStr	否	设置刷新区域底部显示的自定义文本。

其中，参数 refreshing 是必填项，而且使用时最好用 $$ 进行双向绑定，这样才能实时更新刷新状态；参数 builder 可以根据自己的实际情况来决定是否需要，像一般的常用软件，厂家都会自定义刷新区域，后面我会进行简单的演示；参数 promptText 也可以根据自己的实际需求来决定，实际开发中用的不多，一般是自定义刷新区域，也就是会使用到第二个参数 builder ，但这里为了让大家熟悉用法，后面都会有示例供大家参考。

（1）使用默认的刷新区域

示例代码如下：

// 刷新状态
@State refreshState: boolean = false

// 参数 refreshing 使用 $$ 进行双向绑定
Refresh({ refreshing: $$this.refreshState }) {
  Column() {
    Text("下拉即可进入刷新状态")
  }
  .height('100%')
  .width('100%')
  .padding({ top: 30 })
}
.width('100%')
.height('100%')

效果如下所示：

（2）自定义刷新区域的文本

示例代码如下：

// 刷新状态
@State refreshState: boolean = false

// 参数 refreshing 使用 $$ 进行双向绑定
Refresh({ refreshing: $$this.refreshState, promptText: "正在刷新..." }) {
  Column() {
    Text("下拉即可进入刷新状态")
  }
  .height('100%')
  .width('100%')
  .padding({ top: 30 })
}
.width('100%')
.height('100%')

效果如下所示：

 （3）自定义刷新区域

当我们想要自定义刷新区域内容时，需要用到 @Builder 构造函数，可以自定义图标以及文字，示例代码如下：

// 刷新状态
@State refreshState: boolean = false

// 自定义刷新区域
@Builder
RefreshContent() {
  Row({ space: 15 }) {
    Image($r('app.media.refresh'))
      .width(20)
    Text("正在刷新，请稍后....")
  }
}

Refresh({ refreshing: $$this.refreshState, builder: this.RefreshContent() }) {
  Column() {
    Text("下拉即可进入刷新状态")
  }
  .height('100%')
  .width('100%')
  .padding({ top: 30 })
}
.width('100%')
.height('100%')

效果如下所示：

2、所支持的事件

（1）onStateChange

使用方法：onStateChange(callback: (state: RefreshStatus) => void)

当前刷新状态变更时，触发该回调。回调函数中的参数是当前刷新状态的枚举，分别有以下几种：

名称	值	说明
Inactive	0	默认未下拉状态。
Drag	1	下拉中，下拉距离小于刷新距离。
OverDrag	2	下拉中，下拉距离超过刷新距离。
Refresh	3	下拉结束，回弹至刷新距离，进入刷新中状态。
Done	4	刷新结束，返回初始状态（顶部）。

我们可以使用 console.info( ) 将它们打印出来，示例代码如下：

Refresh({ refreshing: $$this.refreshState, builder: this.RefreshContent() }) {
  Column() {
    Text("下拉即可进入刷新状态")
  }
}
// 当刷新状态变更时触发回调
.onStateChange((state: RefreshStatus) => {
  // 不同刷新状态对应的含义
  if (state == 1) {
    console.info("state = 1: 下拉中，下拉距离小于刷新距离")
  }
  if (state == 2) {
    console.info("state = 2: 下拉中，下拉距离超过刷新距离")
  }
  if (state == 3) {
    console.info("state = 3: 下拉结束，回弹至刷新距离，进入刷新中状态")
  }
  if (state == 4) {
    console.info("state = 4: 刷新结束，返回初始状态（顶部）")
  }
})

这样就能在日志里看到不同状态对应的值了。

那了解了这个事件后，我们就可以这样自定义刷新区域了：定义一个变量，通过获取不同的刷新状态，来实时更新刷新区域的文本，示例代码如下：

// 刷新区域文本内容
@State refreshText: string = "正在刷新"

// 自定义刷新区域
@Builder
RefreshContent() {
  Row({ space: 15 }) {
    Image($r('app.media.refresh'))
      .width(20)
    Text(this.refreshText)
  }
}

Refresh({ refreshing: $$this.refreshState, builder: this.RefreshContent() }) {
  Column() {
    Text("下拉即可进入刷新状态")
  }
}
.width('100%')
.height('100%')
.onStateChange((state: RefreshStatus) => {
  if (state == 1) {
    this.refreshText = "下拉刷新"
  }
  if (state == 2) {
    this.refreshText = "松手即可刷新"
  }
  if (state == 3) {
    this.refreshText = "正在刷新....."
  }
  if (state == 4) {
    this.refreshText = "刷新完成"
  }
})

效果如下所示：

（2）onRefreshing

 使用方法：onRefreshing(callback: ( ) => void)

进入刷新状态时，触发回调。

在一开始我们定义状态变量 refreshState 的时候，会初始化为 false。在实际开发中，当我们下拉进入刷新状态时，可以在回调函数中去调接口，获取到数据后将 refreshState 置为 true。在这里为了演示方便，我使用 setTimeout 通过延迟 2s 来模拟获取到数据后的样子。部分代码如下所示：

Refresh({ refreshing: $$this.refreshState, builder: this.RefreshContent() }) {
  Column({ space: 15 }) {
  }
}
// 进入刷新状态时触发回调
.onRefreshing(() => {
  // 2s之后，将刷新状态置为 false
  setTimeout(() => {
    this.refreshState = false
  }, 2000)
})

该事件的效果在前面的代码中都有体现，这里就不再重复展示。详细代码可以参考文章最后的链接，大家可自行下载测试。

3、触底加载更多

这个功能是绝大多数软件都具有的，比如我们逛购物软件、刷小红书等，当划到底部时，会有一个短暂的停顿，然后就加载出了新的页面，这个功能我们在鸿蒙中可以使用 List 组件来实现。

List 是鸿蒙开发中常用的一种列表容器组件，其中有一个事件叫 onReachEnd，当列表到达末尾位置时触发，因此我们可以使用这个事件来实现触底加载更多。部分代码如下：

// 模拟数据
@State mockData: string[] = Array.from({ length: 20 })

List({ space: 15 }) {
  ForEach(this.mockData, (item: string, index: number) => {
    ListItem() {
      Text("文字 " + (index + 1))
        .fontSize(18)
        .fontWeight(600)
        .width('90%')
        .border({ color: "#FF6600", width: 2, radius: 10 })
        .textAlign(TextAlign.Center)
        .padding({ top: 10, bottom: 10 })
    }
  })
}
.height('100%')
.width('100%')
.scrollBar(BarState.Off)
.alignListItem(ListItemAlign.Center)
.onReachEnd(() => {
  setTimeout(() => {
    // 增加 10 条数据
    this.mockData = this.mockData.concat(Array.from({ length: 10 }))
  }, 1000)
})

效果如下：

下拉刷新和触底加载更多通常会同时使用，因此我们可以使用 Refresh 组件嵌套 List 组件来实现，如果大家想尝试完整代码，可以点击 git 链接Refresh 组件自行下载。