pull-refresh component for vue3
npm install pull-refresh-vue3html
刷新次数: {{ count }}
`
`javascript
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
};
}
}
``
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| 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 |
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| refresh | 下拉刷新时触发 | - |