组件核心代码：pullrefresh.vue
<template><div :class="{'animate':isTransition}":style="{transform:`translateY(${distance}px)`}"@touchstart="handlerstart"@touchmove="handlermove"@touchend="handlerend"><div class="refresh_tip" v-if="distance>0">释放即可刷新...</div><div class="refresh_tip" v-if="modelValue">加载中...</div><slot></slot></div></template><script setup>import { ref } from "vue";const distance = ref(0);const startY = ref(0);const isTransition = ref(false);// vue input :value// vue3 update:modelValue modelValueconst props = defineProps({modelValue: {type: Boolean,default: false}});const emits = defineEmits(["update:modelValue", "refreshEnd"]);const handlerstart = e => {console.log("e", e);startY.value = e.touches[0].clientY;};const handlermove = e => {distance.value = e.touches[0].clientY - startY.value;if (distance.value > 120) {distance.value = 120;}};const handlerend = e => {distance.value = 0;startY.value = 0;isTransition.value = true;emits("update:modelValue", true);emits("refreshEnd");};</script><style scoped>.refresh_tip {text-align: center;padding: 12px 0;color: #ccc;}</style>
注册成全局组件
import { createApp } from 'vue'import { cons } from "./utils/index"import './style.css'import App from './App.vue'import Pullfresh from "./components/pullRefresh.vue"const app = createApp(App)ponent("pullfresh", Pullfresh)app.use(ElementPlus)app.config.globalProperties.cons = consapp.mount('#app')
组件使用：
<script setup>import { ref } from "vue";const arr = [{ id: "001", name: "标题一" },{ id: "002", name: "标题二" },{ id: "003", name: "标题三" }];const loading = ref(false);const callback = () => {loading.value = false;// setTimeout(() => {// console.log("end");// loading.value = false;// }, 2000);};</script><template><pullfresh v-model="loading" @refreshEnd="callback"><div v-for="item of arr" :key="item.id">{{item.name}}</div></pullfresh></template><style scoped>.item {padding: 10px 0;border-bottom: 1px solid #ccc;}</style>
