PullDownRefresh 下拉刷新

下拉列表区域即可刷新数据，松手后自动加载新内容

提供下拉刷新交互的容器组件

演示

9:41

代码示例

<re-pull-down-refresh class="demo-default" customStyle="min-height: 400px;" :value="refreshing" @update:value="onValueUpdate" @refresh="onRefresh" > <view class="demo-list"> <view class="demo-list__hint"> <text class="demo-list__hint-text">{{ hintText }}</text> </view> <view class="demo-list-item" v-for="(item, index) in list" :key="index"> <text class="demo-list-text">{{ item }}</text> </view> </view> </re-pull-down-refresh>

引入

推荐使用 easycom 模式，配置后无需手动 import 即可直接使用 <re-pull-down-refresh />。

API

PullDownRefresh Props

名称类型默认值描述必传
valuebooleanfalse是否正在刷新N
disabledbooleanfalse是否禁用下拉刷新N
loadingTextsArray<string>"下拉刷新", "松手刷新", "正在刷新", "刷新完成"加载状态文字提示N
indicatorHeightstring | number"50"加载指示器高度N
maxBarHeightstring"100"最大下拉高度N
customStylestring""自定义样式N

PullDownRefresh Events

名称参数描述
update:valuevalue: boolean-
changevalue: boolean值变化时触发
refresh-刷新时触发
timeout-超时时触发

PullDownRefresh Slots

名称描述
default默认插槽
Popup 弹出层
参考 TDesign popup demo，保留不同方向与应用示例，方便直接对比动画节奏。
SwipeCell 滑动单元格
参考 TDesign 最终示例，使用 re-cell 组合出单侧、双侧与图标操作场景。