pull to refresh

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