pull to refresh

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",

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">

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"