1# refresh 2 3> **NOTE** 4> 5> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. 6 7The **<refresh\>** component is used to refresh a page through a pull-down gesture. 8 9## Required Permissions 10 11None 12 13 14## Child Components 15 16Supported 17 18 19## Attributes 20 21In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported. 22 23| Name| Type| Default Value| Mandatory| Description| 24| -------- | -------- | -------- | -------- | -------- | 25| offset | <length> | - | No| Distance to the top of the parent component from the **<refresh\>** component that comes to rest after a successful pull-down gesture.| 26| refreshing | boolean | false | No| Whether the **\<refresh>** component is being used for refreshing.| 27| type | string | auto | No| Dynamic effect when the component is refreshed. Two options are available and cannot be modified dynamically.<br>- **auto**: default effect. When the list is pulled to the top, the list does not move. When the list is pulled to the bottom, a circle is displayed.<br>- **pulldown**: When the list is pulled to the top, users can continue to pull down to trigger a refresh. The rebound effect will appear after the refresh. If the child component contains a list, set **scrolleffect** of the list to **no** to prevent drop-down effect conflicts.| 28| lasttime | boolean | false | No| Whether to display the last update time. The character string format is **last update time: XXXX**, where **XXXX** is displayed based on the certain time and date formats and cannot be dynamically modified. (It is recommended that this attribute be used when **type** is set to **pulldown**. The fixed distance is at the bottom of the content drop-down area. Pay attention to the **offset** attribute setting to prevent overlapping.)| 29| timeoffset<sup>6+</sup> | <length> | - | No| Distance between the update time and the top of the parent component.| 30| friction | number | 42 | No| Pull-down friction coefficient. The value ranges from 0 to 100. A larger value indicates a more responsive component. For example, if a user pulls the component down 100 px, it will actually move 100 * **friction**% px.| 31 32 33## Styles 34 35In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported. 36 37| Name| Type| Default Value| Mandatory| Description| 38| -------- | -------- | -------- | -------- | -------- | 39| background-color | <color> | white<br>| No| Background color of the **\<refresh>** component.| 40| progress-color | <color> | black<br>| No| Color of the loading icon of the **\<refresh>** component.| 41 42 43## Events 44 45The following events are supported. 46 47| Name| Parameter| Description| 48| -------- | -------- | -------- | 49| refresh | { refreshing: refreshingValue } | Triggered when the **\<refresh>** component is pulled down and the refresh status changes. Available values are as follows:<br>- **false**: The **\<refresh>** component is being pulled down.<br>- **true**: The **\<refresh>** component is not being pulled down.| 50| pulldown | { state: string } | Triggered when a user starts or stops pulling down the **\<refresh>** component. Available values are as follows:<br>- **start**: The pull-down starts.<br>- **end**: The pull-down ends.| 51 52 53## Methods 54 55The [universal methods](../arkui-js/js-components-common-methods.md) are not supported. 56 57 58## Example 59 60```html 61<!-- xxx.hml --> 62<div class="container"> 63 <refresh refreshing="{{fresh}}" onrefresh="refresh"> 64 <list class="list" scrolleffect="no"> 65 <list-item class="listitem" for="list"> 66 <div class="content"> 67 <text class="text">{{$item}}</text> 68 </div> 69 </list-item> 70 </list> 71 </refresh> 72</div> 73``` 74 75```css 76/* xxx.css */ 77.container { 78 flex-direction: column; 79 align-items: center; 80 width: 100%; 81 height: 100%; 82} 83 84.list { 85 width: 100%; 86 height: 100%; 87} 88 89.listitem { 90 width: 100%; 91 height: 150px; 92} 93 94.content { 95 width: 100%; 96 height: 100%; 97 flex-direction: column; 98 align-items: center; 99 justify-content: center; 100} 101 102.text { 103 font-size: 35px; 104 font-weight: bold; 105} 106``` 107 108```js 109// xxx.js 110import promptAction from '@ohos.promptAction'; 111export default { 112 data: { 113 list:[], 114 fresh:false 115 }, 116 onInit() { 117 this.list = []; 118 for (var i = 0; i <= 3; i++) { 119 var item ='List element' + i; 120 this.list.push(item); 121 } 122 }, 123 refresh: function (e) { 124 promptAction.showToast({ 125 message: 'Refreshing...' 126 }) 127 var that = this; 128 that.fresh = e.refreshing; 129 setTimeout(function () { 130 that.fresh = false; 131 var addItem ='Refresh element'; 132 that.list.unshift(addItem); 133 promptAction.showToast({ 134 message: 'Refreshed.' 135 }) 136 }, 2000) 137 } 138} 139``` 140 141 142
