移动端专属组件
PullRefresh 下拉刷新
触屏下拉刷新手势：内容区顶部下拉 → 释放越过阈值触发 refresh，v-model 同步加载中 状态，加载完成后置 false 自动展示成功态并收回。滚动容器不在顶部时不拦截手势（页面 可正常上滚）；超过触发距离后 1/3 阻尼跟手，形成「越拉越紧」的手感。状态机： normal → pulling → loosing → loading → success → normal，全程由 change 事件广播。
基础用法
9:41
下拉刷新
内容条目 #1
触屏设备在滚动区顶部下拉释放即可触发
内容条目 #2
触屏设备在滚动区顶部下拉释放即可触发
内容条目 #3
触屏设备在滚动区顶部下拉释放即可触发
内容条目 #4
触屏设备在滚动区顶部下拉释放即可触发
内容条目 #5
触屏设备在滚动区顶部下拉释放即可触发
内容条目 #6
触屏设备在滚动区顶部下拉释放即可触发
内容条目 #7
触屏设备在滚动区顶部下拉释放即可触发
内容条目 #8
触屏设备在滚动区顶部下拉释放即可触发
html
<eb-pull-refresh v-model="refreshing" @refresh="onRefresh">
<NewsList :items="items" />
</eb-pull-refresh>js
async function onRefresh() {
await reloadFirstScreen()
refreshing.value = false // 置 false 后自动展示「刷新成功」并收回
}要点：
- 手势边界：滚动容器
scrollTop > 0时下拉不生效（让位给页面滚动）；touchmove以 非被动模式监听，仅在可下拉时preventDefault阻断浏览器原生下拉。 - 状态闭环：
refresh触发时组件已置 loading；业务加载完成把modelValue置false， 成功态停留success-duration后自动收回，无需手动清理。
自定义头部
#head 插槽替换默认提示（参数 { status, distance }），可完全自定义动画；四段文案 也可按需覆盖。
9:41
下拉更新内容
自定义头部演示
API
PullRefresh Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| v-model | 刷新中状态；业务加载完成置 false 触发成功态收回 | boolean | false |
| disabled | 禁用下拉手势 | boolean | false |
| head-height | 触发刷新的下拉距离（px），同时是头部高度 | number | 50 |
| success-duration | 成功态停留时长（ms），0 直接收回 | number | 500 |
| animation-duration | 收回/展开动画时长（ms） | number | 300 |
| pulling-text / loosing-text | 未到阈值 / 越过阈值的提示文案 | string | 下拉刷新 / 释放刷新 |
| loading-text / success-text | 加载中 / 完成后的提示文案 | string | 加载中… / 刷新成功 |
PullRefresh Events
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| refresh | 释放越过阈值时触发，组件已进入 loading | — | — |
| change | 状态流转广播 | (status, oldStatus) => void | — |
| update:modelValue | v-model 同步 | (boolean) => void | — |
PullRefresh Slots
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| default | 滚动内容 | — | — |
| head | 自定义头部 | { status, distance } | 默认提示 |