输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
文档管理中心

快应用

输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
API参考
API参考快应用组件refresh

refresh

更新时间: 2024-12-12 07:18
本文导读
展开章节

概述

下拉刷新容器。

使用限制

展开

限制条件

说明

适用终端

手机、平板、车机

适用区域

全球

子组件

支持

属性

除了支持 通用属性 以外，还支持如下属性。

展开

名称

类型

默认值

是否必填

描述

offset

length

132px

否

刷新组件静止时距离顶部距离。

refreshing

boolean

false

否

刷新组件是否正在刷新。

type(1020+)

string

material

否

两种可选值，不可动态修改（华为扩展接口，非厂商联盟规范，在其他厂商应用中设置无效）

  • material：默认效果，界面到顶触发下拉刷新时界面不移动。
  • overscroll：界面到顶触发下拉刷新时，界面可以继续下拉一段距离，有回弹效果。

厂商联盟标准：两种可选值，不可动态修改（1035+）

  • auto：默认效果，界面到顶触发下拉刷新时界面不移动。
  • pulldown：界面到顶触发下拉刷新时，界面可以继续下拉一段距离，有回弹效果。
说明

界面到顶触发下拉刷新时，界面如果移动，不会触发onReachTop生命周期回调。

enable-refresh (1080+)

boolean

true

否

是否允许下拉来刷新refresh组件。

样式

除了支持 通用样式 以外，还支持如下样式。

展开

名称

类型

默认值

是否必填

描述

background-color

color

white

否

刷新组件背景颜色

progress-color

color

black

否

刷新组件loading颜色

事件

低于1040版本不支持click事件，touch事件和longpress事件。除了支持 通用事件 以外，还支持如下事件。

展开

名称

参数

描述

refresh

{refreshing: refreshingValue}

下拉refresh组件，触发刷新操作。

示例代码

refresh界面不移动

收起
自动换行
深色代码主题
复制
  1. <template>
  2.     <div class="container">
  3.         <!-- 属性refreshing用于标识refresh组件的加载状态 -->
  4.         <refresh class="refresh" onrefresh="refresh" refreshing="{{isRefreshing}}" offset=800px type="pulldown" enable-refresh="{{enableRefresh}}">
  5.             <div class="page-title-wrap">
  6.                 <text class="page-title ">{{componentName}}</text>
  7.             </div>
  8.             <div class="item-container">
  9.                 <input class="btn" type="button" value="{{$t('message.component.refresh.stopRefresh')}}"  onclick="stopRefresh" />
  10.             </div>
  11.             <div class="item-container">
  12.                 <input class="btn" type="button" value="enable refresh" onclick="isEnableRefresh"/>
  13.             </div>
  14.         </refresh>
  15.     </div>
  16. </template>
  17. <style>
  18.     @import '../Common/css/common.css';
  19.     .refresh {
  20.         background-color: #FFFFFF;
  21.         progress-color: #0faeff;
  22.         flex-direction: column;
  23.         flex: 1;
  24.     }
  25.     .item-container {
  26.         margin-bottom: 50px;
  27.         margin-right: 60px;
  28.         margin-left: 60px;
  29.         flex-direction: column;
  30.     }
  31. </style>
  32. <script>
  33.     import prompt from '@system.prompt'
  34.     export default {
  35.         data: {
  36.             componentName: 'refresh',
  37.             isRefreshing: false,
  38.             enableRefresh :true
  39.         },
  40.         onInit() {
  41.             this.$page.setTitleBar({ text: 'refresh' })
  42.         },
  43.         refresh: function (e) {
  44.             prompt.showToast({
  45.                 message:this.$t('message.component.refresh.refreshing')
  46.             })
  47.             var that = this;
  48.             // 更新刷新状态（属性refreshing的值从false改为true会触发refresh组件的状态更新，反之亦然）
  49.             that.isRefreshing = e.refreshing;
  50.             setTimeout(function () {
  51.                 // 关闭刷新状态
  52.                 that.isRefreshing = false;
  53.                 prompt.showToast({
  54.                     message:that.$t('message.component.refresh.refreshComplete')
  55.                 })
  56.             }, 3000)
  57.         },
  58.        isEnableRefresh :function() {
  59.            this.enableRefresh = !this.enableRefresh
  60.            prompt.showToast({
  61.            message:this.enableRefresh
  62.            })
  63.         },
  64.         stopRefresh: function () {
  65.             this.isRefreshing = false;
  66.         }
  67.     }
  68. </script>

示例代码效果图：

refresh界面移动

收起
自动换行
深色代码主题
复制
  1. <template>
  2.     <div>
  3.         <!-- 属性refreshing用于标识refresh组件的加载状态 -->
  4.         <refresh onrefresh="refresh" refreshing="{{isRefreshing}}" offset=800px type = "overscroll">
  5.             <div>
  6.                 <text class="page-title ">{{componentName}}</text>
  7.             </div>
  8.             <div>
  9.                 <input type="button" value="停止刷新" onclick="stopRefresh" />
  10.             </div>
  11.         </refresh>
  12.     </div>
  13. </template>
  14. <style>
  15.     @import '../Common/css/common.css';
  16.     .refresh {
  17.         background-color: #FFFFFF;
  18.         progress-color: #0faeff;
  19.         flex-direction: column;
  20.         flex: 1;
  21.     }
  22.     .item-container {
  23.         margin-bottom: 50px;
  24.         margin-right: 60px;
  25.         margin-left: 60px;
  26.         flex-direction: column;
  27.     }
  28. </style>
  29. <script>
  30.     import prompt from '@system.prompt'
  31.     export default {
  32.         data: {
  33.             componentName: 'refresh',
  34.             isRefreshing: false,
  35.         },
  36.         onInit() {
  37.             this.$page.setTitleBar({ text: 'refresh' })
  38.         },
  39.         refresh: function (e) {
  40.             prompt.showToast({
  41.                 message: '刷新中.....'
  42.             })
  43.             var that = this;
  44.             // 更新刷新状态（属性refreshing的值从false改为true会触发refresh组件的状态更新，反之亦然）
  45.             that.isRefreshing = e.refreshing;
  46.             setTimeout(function () {
  47.                 // 关闭刷新状态
  48.                 that.isRefreshing = false;
  49.                 prompt.showToast({
  50.                     message: '刷新完成'
  51.                 })
  52.             }, 3000)
  53.         },
  54.         stopRefresh: function () {
  55.             this.isRefreshing = false;
  56.         },
  57.     }
  58. </script>

示例代码效果图：

refresh（包含list）界面不移动

收起
自动换行
深色代码主题
复制
  1. <template>
  2.     <div>
  3.         <!-- 属性refreshing用于标识refresh组件的加载状态 -->
  4.         <refresh onrefresh="refresh" refreshing="{{isRefreshing}}" offset=800px type="material">
  5.             <div>
  6.                 <text class="page-title ">{{componentName}}</text>
  7.             </div>
  8.             <div>
  9.                 <input type="button" value="停止刷新" onclick="stopRefresh" />
  10.             </div>
  11.             <!-- 列表 -->
  12.             <list onscrollbottom="scrollbottom" onscrolltop="scrolltop" onscroll="scroll" id="list" scrollpage="{{scrollPage}}">
  13.                 <!-- 列表元素，属性type值相同时，需要确保渲染后的视图布局也完全相同，用show代替if，确保布局视图不变 -->
  14.                 <list-item type="listItem" class="item item-color" for="{{listData}}">
  15.                     <text>{{$item}}--{{$idx}}</text>
  16.                 </list-item>
  17.                 <!-- 加载更多 -->
  18.                 <list-item type="loadMore" if="{{loadMore}}">
  19.                     <progress type="circular"></progress>
  20.                     <text>加载更多</text>
  21.                 </list-item>
  22.             </list>
  23.         </refresh>
  24.     </div>
  25. </template>
  26. <style>
  27.     @import '../Common/css/common.css';
  28.     .refresh {
  29.         background-color: #FFFFFF;
  30.         progress-color: #0faeff;
  31.         flex-direction: column;
  32.         flex: 1;
  33.     }
  34.     .item-container {
  35.         margin-bottom: 50px;
  36.         margin-right: 60px;
  37.         margin-left: 60px;
  38.         flex-direction: column;
  39.     }
  40.     .list {
  41.         flex-direction: column;
  42.         flex: 1;
  43.         padding-left: 60px;
  44.         padding-right: 60px;
  45.         columns: 4;
  46.         border-color: #FF0000;
  47.         border-width: 5px;
  48.     }
  49.     .item {
  50.         height: 150px;
  51.         align-items: flex-start;
  52.         margin-bottom: 15px;
  53.         border-color: #9400D3;
  54.         border-width: 5px;
  55.         margin-right: 20px;
  56.     }
  57.     .load-more {
  58.         justify-content: center;
  59.         align-items: center;
  60.         height: 100px;
  61.         border-color: #bbbbbb;
  62.         border-bottom-width: 1px;
  63.     }
  64.     .item-color {
  65.         background-color: #f76160;
  66.     }
  67. </style>
  68. <script>
  69.     import prompt from '@system.prompt'
  70.     export default {
  71.         data: {
  72.             componentName: 'refresh',
  73.             isRefreshing: false,
  74.             loadMore: true,
  75.             listAdd: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
  76.             listData: [],
  77.             scrollPage: false,
  78.             showListBtn: true,
  79.             listClass: 'selected',
  80.             arrayClass: '',
  81.         },
  82.         onInit() {
  83.             this.$page.setTitleBar({ text: 'refresh' })
  84.             // 初始化列表数据
  85.             this.listData = [].concat(this.listAdd);
  86.         },
  87.         refresh: function (e) {
  88.             prompt.showToast({
  89.                 message: '刷新中.....'
  90.             })
  91.             var that = this;
  92.             // 更新刷新状态（属性refreshing的值从false改为true会触发refresh组件的状态更新，反之亦然）
  93.             that.isRefreshing = e.refreshing;
  94.             setTimeout(function () {
  95.                 // 关闭刷新状态
  96.                 that.isRefreshing = false;
  97.                 prompt.showToast({
  98.                     message: '刷新完成'
  99.                 })
  100.             }, 3000)
  101.         },
  102.         stopRefresh: function () {
  103.             this.isRefreshing = false;
  104.         },
  105.         scrollbottom: function () {
  106.             prompt.showToast({
  107.                 message: '到底部了'
  108.             })
  109.             // 加载下一页
  110.             var that = this;
  111.             var renderData = [].concat(that.listData, that.listAdd);
  112.             setTimeout(function () {
  113.                 that.listData = renderData;
  114.             }, 1000)
  115.         },
  116.         scrolltop: function () {
  117.             prompt.showToast({
  118.                 message: '在最顶部了'
  119.             })
  120.         },
  121.         //滑动过程 中的监听
  122.         scroll: function (e) {
  123.             let msg = "滑动中.scrollX:" + e.scrollX
  124.                 + " .scrollY:" + e.scrollY
  125.                 + " .scrollState:" + e.scrollState;
  126.             console.info(msg);
  127.         }
  128.     }
  129. </script>

示例代码效果图：

refresh（包含list）界面移动

收起
自动换行
深色代码主题
复制
  1. <template>
  2.     <div>
  3.         <!-- 属性refreshing用于标识refresh组件的加载状态 -->
  4.         <refresh onrefresh="refresh" refreshing="{{isRefreshing}}" offset=800px type="overscroll">
  5.             <div>
  6.                 <text class="page-title ">{{componentName}}</text>
  7.             </div>
  8.             <div>
  9.                 <input type="button" value="停止刷新" onclick="stopRefresh" />
  10.             </div>
  11.             <!-- 列表 -->
  12.             <list onscrollbottom="scrollbottom" onscrolltop="scrolltop" onscroll="scroll" id="list" scrollpage="{{scrollPage}}">
  13.                 <!-- 列表元素，属性type值相同时，需要确保渲染后的视图布局也完全相同，用show代替if，确保布局视图不变 -->
  14.                 <list-item type="listItem" class="item item-color" for="{{listData}}">
  15.                     <text>{{$item}}--{{$idx}}</text>
  16.                 </list-item>
  17.                 <!-- 加载更多 -->
  18.                 <list-item type="loadMore" if="{{loadMore}}">
  19.                     <progress type="circular"></progress>
  20.                     <text>加载更多</text>
  21.                 </list-item>
  22.             </list>
  23.         </refresh>
  24.     </div>
  25. </template>
  26. <style>
  27.     @import '../Common/css/common.css';
  28.     .refresh {
  29.         background-color: #FFFFFF;
  30.         progress-color: #0faeff;
  31.         flex-direction: column;
  32.         flex: 1;
  33.     }
  34.     .item-container {
  35.         margin-bottom: 50px;
  36.         margin-right: 60px;
  37.         margin-left: 60px;
  38.         flex-direction: column;
  39.     }
  40.     .list {
  41.         flex-direction: column;
  42.         flex: 1;
  43.         padding-left: 60px;
  44.         padding-right: 60px;
  45.         columns: 4;
  46.         border-color: #FF0000;
  47.         border-width: 5px;
  48.     }
  49.     .item {
  50.         height: 150px;
  51.         align-items: flex-start;
  52.         margin-bottom: 15px;
  53.         border-color: #9400D3;
  54.         border-width: 5px;
  55.         margin-right: 20px;
  56.     }
  57.     .load-more {
  58.         justify-content: center;
  59.         align-items: center;
  60.         height: 100px;
  61.         border-color: #bbbbbb;
  62.         border-bottom-width: 1px;
  63.     }
  64.     .item-color {
  65.         background-color: #f76160;
  66.     }
  67. </style>
  68. <script>
  69.     import prompt from '@system.prompt'
  70.     export default {
  71.         data: {
  72.             componentName: 'refresh',
  73.             isRefreshing: false,
  74.             loadMore: true,
  75.             listAdd: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
  76.             listData: [],
  77.             scrollPage: false,
  78.             showListBtn: true,
  79.             listClass: 'selected',
  80.             arrayClass: '',
  81.         },
  82.         onInit() {
  83.             this.$page.setTitleBar({ text: 'refresh' })
  84.             // 初始化列表数据
  85.             this.listData = [].concat(this.listAdd);
  86.         },
  87.         refresh: function (e) {
  88.             prompt.showToast({
  89.                 message: '刷新中.....'
  90.             })
  91.             var that = this;
  92.             // 更新刷新状态（属性refreshing的值从false改为true会触发refresh组件的状态更新，反之亦然）
  93.             that.isRefreshing = e.refreshing;
  94.             setTimeout(function () {
  95.                 // 关闭刷新状态
  96.                 that.isRefreshing = false;
  97.                 prompt.showToast({
  98.                     message: '刷新完成'
  99.                 })
  100.             }, 3000)
  101.         },
  102.         stopRefresh: function () {
  103.             this.isRefreshing = false;
  104.         },
  105.         scrollbottom: function () {
  106.             prompt.showToast({
  107.                 message: '到底部了'
  108.             })
  109.             // 加载下一页
  110.             var that = this;
  111.             var renderData = [].concat(that.listData, that.listAdd);
  112.             setTimeout(function () {
  113.                 that.listData = renderData;
  114.             }, 1000)
  115.         },
  116.         scrolltop: function () {
  117.             prompt.showToast({
  118.                 message: '在最顶部了'
  119.             })
  120.         },
  121.         //滑动过程 中的监听
  122.         scroll: function (e) {
  123.             let msg = "滑动中.scrollX:" + e.scrollX
  124.                 + " .scrollY:" + e.scrollY
  125.                 + " .scrollState:" + e.scrollState;
  126.             console.info(msg);
  127.         }
  128.     }
  129. </script>

示例代码效果图：

版本更新说明

展开

版本

发布日期

描述

1080

2021-12-28

新增enable-refresh属性。默认值为true，如果该参数未设置，按默认值处理。

1020

2018-06-20

新增了属性type的设置。开发者可以在组件补充type的设置，默认设置为“material”，未设置均按“material”处理。

相关链接

案例

rating
refresh2（1090+）
简体中文
华为开发者联盟 版权所有 ©2026
问题反馈
使用条款
华为开发者联盟用户协议
关于华为开发者联盟与隐私的声明
Cookies
开源软件声明
在 API参考 中进行搜索
请输入您想要搜索的关键词