mx-refresh
mx-refresh 刷新
介绍
mx-refresh 实现了基本的下拉刷新、上拉加载更多功能。
使用方式
import '../../components/mx-refresh/mx-refresh.stml'
代码示例
下拉刷新
<mx-refresh refreshing={refreshingHeader} @refreshing="onRefreshingHeader"></mx-refresh>
上拉加载更多
<mx-refresh type="footer" refreshing={refreshingFooter} @refreshing="onRefreshingFooter"></mx-refresh>
API
props 属性
| 属性名称 |
说明 |
类型 |
默认值 |
| type |
指定刷新组件为下拉刷新或上拉加载,取值范围 header、footer |
string |
header |
| img-arrow |
箭头图标路径 |
string |
内置图标 |
| img-loading |
刷新状态时加载图标路径 |
string |
内置图标 |
| background |
背景颜色 |
string |
- |
| text-color |
文字颜色 |
string |
#000 |
| text-normal |
拖动时达到刷新阈值之前状态的文字描述 |
string |
下拉时为“下拉可以刷新”,上拉时为“上拉可以加载” |
| text-dragging |
拖动时达到刷新阈值之后状态的文字描述 |
string |
下拉时为“松开可以刷新”,上拉时为“松开可以加载” |
| text-refreshing |
刷新中状态的文字描述 |
string |
下拉时为“刷新中...”,上拉时为“加载中...” |
| refreshing |
设置是否进入刷新状态 |
boolean |
false |
events 事件
| 事件名 |
说明 |
回调参数 |
| refreshing |
进入刷新状态时触发 |
- |