From 780e809af10382b381fed3c2ee978204f49d8656 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Sun, 2 Jul 2023 08:57:00 +0800
Subject: [PATCH] pull to refresh

---
 package.json                              |  1 +
 src/views/subscribe/SubscribeListView.vue | 19 ++++++++++++++++---
 yarn.lock                                 |  5 +++++
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index dd41c464..3cd7226a 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "nprogress": "^0.2.0",
     "postcss-purgecss": "^5.0.0",
     "prismjs": "^1.29.0",
+    "pull-refresh-vue3": "^0.3.1",
     "roboto-fontface": "^0.10.0",
     "sass": "^1.59.3",
     "tailwindcss": "^3.3.2",
diff --git a/src/views/subscribe/SubscribeListView.vue b/src/views/subscribe/SubscribeListView.vue
index 3210cd48..afbf2420 100644
--- a/src/views/subscribe/SubscribeListView.vue
+++ b/src/views/subscribe/SubscribeListView.vue
@@ -2,6 +2,7 @@
 import api from "@/api";
 import type { Subscribe } from "@/api/types";
 import SubscribeCard from "@/components/cards/SubscribeCard.vue";
+import PullRefresh from 'pull-refresh-vue3';
 
 // 输入参数
 const props = defineProps({
@@ -23,6 +24,16 @@ const fetchData = async () => {
 // 加载时获取数据
 onMounted(fetchData);
 
+// 刷新状态
+const loading = ref(false);
+
+// 下拉刷新
+const onRefresh = () => {
+  loading.value = true;
+  fetchData();
+  loading.value = false;
+};
+
 // 过滤数据
 const filteredDataList = computed(() => {
   return dataList.value.filter((data) => data.type === props.type);
@@ -30,9 +41,11 @@ const filteredDataList = computed(() => {
 </script>
 
 <template>
-  <div class="grid gap-3 grid-subscribe-card">
-    <SubscribeCard v-for="data in filteredDataList" :key="data.id" :media="data" />
-  </div>
+  <PullRefresh v-model="loading" @refresh="onRefresh">
+    <div class="grid gap-3 grid-subscribe-card">
+      <SubscribeCard v-for="data in filteredDataList" :key="data.id" :media="data" />
+    </div>
+  </PullRefresh>
 </template>
 
 <style type="scss">
diff --git a/yarn.lock b/yarn.lock
index fadf6daa..6692ace0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5924,6 +5924,11 @@ proxy-from-env@^1.1.0:
   resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
   integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
 
+pull-refresh-vue3@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/pull-refresh-vue3/-/pull-refresh-vue3-0.3.1.tgz#e75ffad5d71e30a85b5338f2beca9fc8a1e01432"
+  integrity sha512-DTcosG4LT3dGF/amzMP3YOwQ11x1taxQU3ChGx2SDCT5LMmyNpUD7pb2FAZkB/QEHVSpUTIfCcanfXANkYOXjw==
+
 pump@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/pump/-/pump-3.0.0.tgz#b4a2116815bde2f4e1ea602354e8c75565107a64"