1# Refresh 2 3 可以进行页面下拉操作并显示刷新动效的容器组件。 4 5> **说明：** 6> 7> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8> 9> 当设置自定义组件时，自定义组件的高度限制在64vp之内。 10 11## 子组件 12 13支持单个子组件。 14 15## 接口 16 17Refresh\(value: \{ refreshing: boolean, offset?: number | string , friction?: number | string, builder?: Custombuilder\}\) 18 19**参数：** 20 21| 参数 | 参数名 | 必填 | 参数描述 | 22| ---------- | ---------------------------------------- | ---- | ---------------------------------------- | 23| refreshing | boolean | 是 | 当前组件是否正在刷新。<br/>该参数支持[$$](../../quick-start/arkts-two-way-sync.md)双向绑定变量。 | 24| offset | string \| number | 否 | 下拉起点距离组件顶部的距离。<br/>默认值：16，单位vp <br/>**说明：**<br/>offset取值范围[0vp,64vp]。大于64vp按照64vp处理。不支持百分比，不支持负数 | 25| friction | number \| string | 否 | 下拉摩擦系数，取值范围为0到100。<br/>默认值：62<br/>- 0表示下拉刷新容器不跟随手势下拉而下拉。<br/>- 100表示下拉刷新容器紧紧跟随手势下拉而下拉。<br/>- 数值越大，下拉刷新容器跟随手势下拉的反应越灵敏。 | 26| builder | [CustomBuilder](ts-types.md#custombuilder8)<sup>10+</sup> | 否 | 下拉时，自定义刷新样式的组件。 | 27 28## 属性 29 30支持[通用属性](ts-universal-attributes-size.md)。 31 32## 事件 33 34除支持[通用事件](ts-universal-events-click.md)外，还支持以下事件： 35 36 37| 名称 | 描述 | 38| ---------------------------------------- | -------------------------------------- | 39| onStateChange(callback: (state: [RefreshStatus](#refreshstatus枚举说明)) => void) | 当前刷新状态变更时，触发回调。<br/>- state：刷新状态。 | 40| onRefreshing(callback: () => void) | 进入刷新状态时触发回调。 | 41 42## RefreshStatus枚举说明 43 44| 名称 | 描述 | 45| -------- | -------------------- | 46| Inactive | 默认未下拉状态。 | 47| Drag | 下拉中，下拉距离小于刷新距离。 | 48| OverDrag | 下拉中，下拉距离超过刷新距离。 | 49| Refresh | 下拉结束，回弹至刷新距离，进入刷新状态。 | 50| Done | 刷新结束，返回初始状态（顶部）。 | 51 52 53## 示例 54 55```ts 56// xxx.ets 57@Entry 58@Component 59struct RefreshExample { 60 @State isRefreshing: boolean = false 61 @State counter: number = 0 62 63 build() { 64 Column() { 65 Refresh({ refreshing: $$this.isRefreshing, offset: 120, friction: 100 }) { 66 Text('Pull Down and refresh: ' + this.counter) 67 .fontSize(30) 68 .margin(10) 69 } 70 .onStateChange((refreshStatus: RefreshStatus) => { 71 console.info('Refresh onStatueChange state is ' + refreshStatus) 72 }) 73 .onRefreshing(() => { 74 setTimeout(() => { 75 this.counter++ 76 this.isRefreshing = false 77 }, 1000) 78 console.log('onRefreshing test') 79 }) 80 } 81 } 82} 83``` 84 85 86
