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