1# refresh 2 3> **说明：** 4> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 5 6下拉刷新容器。 7 8## 权限列表 9 10无 11 12 13## 子组件 14 15支持。 16 17 18## 属性 19 20除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性： 21 22| 名称 | 类型 | 默认值 | 必填 | 描述 | 23| -------- | -------- | -------- | -------- | -------- | 24| offset | <length> | - | 否 | 刷新组件静止时距离父组件顶部的距离。 | 25| refreshing | boolean | false | 否 | 标识刷新组件当前是否正在刷新。 | 26| type | string | auto | 否 | 设置组件刷新时的动效。两个可选值，不支持动态修改。<br/>- auto: 默认效果，列表界面拉到顶后，列表不移动，下拉后有转圈弹出。<br/>- pulldown: 列表界面拉到顶后，可以继续往下滑动一段距离触发刷新，刷新完成后有回弹效果（如果子组件含有list，防止下拉效果冲突，需将list的scrolleffect设置为no）。 | 27| lasttime | boolean | false | 否 | 设置是否显示上次更新时间，字符串格式为：“上次更新时间：XXXX ”，XXXX 按照时间日期显示规范显示，不可动态修改（建议type为pulldown时使用，固定距离位于内容下拉区域底部，使用时注意offset属性设置，防止出现重叠）。 | 28| timeoffset<sup>6+</sup> | <length> | - | 否 | 设置更新时间距离父组件顶部的距离。 | 29| friction | number | 42 | 否 | 下拉摩擦系数，取值范围：0-100，数值越大refresh组件跟手性高，数值越小refresh跟手性低。 | 30 31 32## 样式 33 34除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式： 35 36| 名称 | 类型 | 默认值 | 必填 | 描述 | 37| -------- | -------- | -------- | -------- | -------- | 38| background-color | <color> | white<br/> | 否 | 设置刷新组件的背景颜色。 | 39| progress-color | <color> | black<br/> | 否 | 设置刷新组件的loading图标颜色。 | 40 41 42## 事件 43 44仅支持如下事件： 45 46| 名称 | 参数 | 描述 | 47| -------- | -------- | -------- | 48| refresh | { refreshing: refreshingValue } | 下拉刷新状态变化时触发。可能值：<br/>- false：当前处于下拉刷新过程中。<br/>- true：当前未处于下拉刷新过程中。 | 49| pulldown | { state: string } | 下拉开始和松手时触发。可能值：<br/>- start：表示开始下拉。<br/>- end：表示结束下拉。 | 50 51 52## 方法 53 54不支持[通用方法](../arkui-js/js-components-common-methods.md)。 55 56 57## 示例 58 59```html 60<!-- xxx.hml --> 61<div class="container"> 62 <refresh refreshing="{{fresh}}" onrefresh="refresh"> 63 <list class="list" scrolleffect="no"> 64 <list-item class="listitem" for="list"> 65 <div class="content"> 66 <text class="text">{{$item}}</text> 67 </div> 68 </list-item> 69 </list> 70 </refresh> 71</div> 72``` 73 74```css 75/* xxx.css */ 76.container { 77 flex-direction: column; 78 align-items: center; 79 width: 100%; 80 height: 100%; 81} 82 83.list { 84 width: 100%; 85 height: 100%; 86} 87 88.listitem { 89 width: 100%; 90 height: 150px; 91} 92 93.content { 94 width: 100%; 95 height: 100%; 96 flex-direction: column; 97 align-items: center; 98 justify-content: center; 99} 100 101.text { 102 font-size: 35px; 103 font-weight: bold; 104} 105``` 106 107```js 108// xxx.js 109import promptAction from '@ohos.promptAction'; 110export default { 111 data: { 112 list:[], 113 fresh:false 114 }, 115 onInit() { 116 this.list = []; 117 for (var i = 0; i <= 3; i++) { 118 var item = '列表元素' + i; 119 this.list.push(item); 120 } 121 }, 122 refresh: function (e) { 123 promptAction.showToast({ 124 message: '刷新中...' 125 }) 126 var that = this; 127 that.fresh = e.refreshing; 128 setTimeout(function () { 129 that.fresh = false; 130 var addItem = '更新元素'; 131 that.list.unshift(addItem); 132 promptAction.showToast({ 133 message: '刷新完成!' 134 }) 135 }, 2000) 136 } 137} 138``` 139 140 141
