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	下拉刷新时触发	-