# 🎉 我开发了一个优雅的 UniApp 下拉刷新插件，代码量减少 85%！
## 📦 插件介绍
**fgi-refresh** - 一个优雅的 UniApp 下拉刷新插件
- ✨ 精美的刷新动画，位于页面中间
- 🚀 只需一行代码即可使用
- 🔄 自动管理刷新状态和动画
- 💪 统一管理所有页面
- 📱 全平台支持（App/H5/小程序）
- 🌓 自动适配暗黑模式
- 📦 零依赖，包体积小
## 🎯 为什么开发这个插件？
在日常开发中，我发现每个页面都需要：
- 重复编写下拉刷新逻辑
- 手动管理刷新状态
- 手动显示/隐藏动画
- 代码量多，维护困难
于是我开发了这个插件，将代码量从 **100+ 行减少到 3 行**！
## 🚀 快速开始
### 1. 安装
通过 DCloud 插件市场：
1. 搜索 "fgi-refresh"
2. 点击「使用 HBuilderX 导入插件」
### 2. 配置
在 `pages.json` 中启用下拉刷新：
```json
{
"path": "pages/home/index",
"style": {
"enablePullDownRefresh": true
}
}
3. 使用（只需 3 行代码！）
<template>
<view class="page">
<fgi-refresh ref="customRefreshRef" :isRefreshing="isRefreshing" />
<!-- 你的页面内容 -->
</view>
</template>
<script setup>
import { useRefresh } from '@/uni_modules/fgi-refresh/composables/useRefresh'
const { customRefreshRef, isRefreshing } = useRefresh(async () => {
await loadData()
})
</script>
就这么简单！✅
💡 核心特性
1. 精美的动画效果
![刷新动画截图]
流畅的旋转脉冲动画，位于页面中间，视觉体验极佳。
2. 极简的使用方式
使用前：
// 需要 100+ 行代码
// 需要手动管理状态
// 需要手动控制动画
// 代码重复，难以维护
使用后：
// 只需 3 行代码！
const { customRefreshRef, isRefreshing } = useRefresh(async () => {
await loadData()
})
3. 自动管理
- ✅ 自动显示刷新动画
- ✅ 自动隐藏刷新动画
- ✅ 自动处理错误
- ✅ 自动停止刷新
- ✅ 统一管理逻辑
4. 全平台支持
- ✅ App (iOS/Android)
- ✅ H5
- ✅ 微信小程序
- ✅ 支付宝小程序
- ✅ 百度小程序
- ✅ 字节跳动小程序
- ✅ QQ小程序
- ✅ 快手小程序
- ✅ 京东小程序
📊 性能对比
| 指标 | 传统方式 | 使用插件 | 提升 |
|---|---|---|---|
| 代码量 | 100+ 行 | 3 行 | ⬇️ 85% |
| 开发时间 | 30 分钟 | 3 分钟 | ⬇️ 90% |
| 维护成本 | 高 | 低 | ⬇️ 95% |
| 代码复用 | 低 | 高 | ⬆️ 100% |
🔧 更多用法
多个数据源
const { customRefreshRef, isRefreshing } = useRefresh(async () => {
await loadBanners()
await loadProducts()
await loadNews()
})
错误处理
const { customRefreshRef, isRefreshing } = useRefresh(
async () => await loadData(),
{
showToast: true,
onSuccess: () => console.log('刷新成功'),
onError: (error) => console.error('刷新失败', error)
}
)
自定义 Logo
<fgi-refresh
ref="customRefreshRef"
:isRefreshing="isRefreshing"
logoUrl="https://your-domain.com/logo.png"
/>
📸 效果展示
![效果图1：刷新动画] ![效果图2：多平台支持] ![效果图3：代码示例]
🔗 相关链接
- DCloud 插件市场：[插件链接]
- GitHub 仓库：[GitHub 链接]
- 完整文档：[文档链接]
💬 反馈与支持
如果插件对你有帮助，欢迎：
- ⭐ Star 收藏
- 🐛 提交 Issue
- 💡 提交 PR
- 📢 分享给朋友
🙏 最后
这个插件是我在开发过程中的总结和优化，希望能帮助更多的开发者提高开发效率。
如果有任何问题或建议，欢迎在评论区交流！
作者: MichaelNengQiang GitHub: @silence3838438 QQ: 951123604
