pull-refresh-vue3
pull-refresh-vue3
Example
<template>
<pull-refresh v-model="loading" @refresh="onRefresh">
<p>刷新次数: {{ count }}</p>
</pull-refresh>
</template>
import { ref } from 'vue'
import PullRefresh from 'pull-refresh-vue3'
export default {
components: {
PullRefresh
},
setup() {
const count = ref(0);
const loading = ref(false);
const onRefresh = () => {
console.log('refresh')
setTimeout(() => {
loading.value = false;
count.value++;
}, 1000);
};
return {
count,
loading,
onRefresh
};
}
}
props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| v-model | 是否处于加载中状态 | boolean | - |
| pulling-text | 下拉过程提示文案 | string | 下拉即可刷新... |
| loosing-text | 释放过程提示文案 | string | 释放即可刷新... |
| loading-text | 加载过程提示文案 | string | 加载中... |
| success-text | 刷新成功提示文案 | string | - |
| success-duration | 刷新成功提示展示时长(ms) | number | string | 500 |
| animation-duration | 动画时长 | number | string | 300 |
| head-height | 顶部内容高度 | number | string | 50 |
pull-distance v3.0.8 | 触发下拉刷新的距离 | number | string | 与 head-height 一致 |
| disabled | 是否禁用下拉刷新 | boolean | false |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| refresh | 下拉刷新时触发 | - |
Related Packages
vue-easy-pull-refresh
Lightweight Vue 3 pull-to-refresh component and composable with touch/mouse gest...
16,765
1
markdown-to-jsx
A very fast and versatile markdown toolchain. AST, React, React Native, SolidJS,...
214,042,213
2,394
@vue/component-compiler-utils
Lower level utilities for compiling Vue single file components
62,357,406
322
@storybook/vue3
Storybook Vue 3 renderer: Develop, document, and test UI components in isolation
40,026,008
91,392
Version History
| Version | Released | Vue | License |
|---|---|---|---|
| 0.3.1 | >=3.0.0 | MIT | |
| 0.3.0 | >=3.0.0 | MIT |