vue3 实现一个下拉刷新

1. 实现最简单的下拉刷新雏形








2 优化体验。当手指滑动到一定距离以后禁止再继续往下滑动,同时给手指松开的时候添加动画效果,当手指抬起时,添加文本提示加载中....增强体验感








3 把加载中的状态单独抽离出来,在父组件中用v-model去控制。










------------------------------------------------------------------------
//父组件中的使用






4 插件化,把该组件注册成一个全局组件。

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import refresh from "./components/reftest"

const app = createApp(App)
app.component("pullRefresh", refresh)
app.use(ElementPlus)
app.config.globalProperties.cons = cons
app.mount('#app')

--------------------------------------------------
//组件中使用





你可能感兴趣的:(vue,vue.js,javascript,前端,下拉刷新实现)