feat: 瀑布流组件添加无限滚动

src/views/components/waterfall/index.vue

@@ -2,8 +2,10 @@
 import { getList } from "./api";
 import error from "./error.png";
 import loading from "./loading.png";
-import { onMounted, reactive, ref } from "vue";
+import { ElLoading } from "element-plus";
 import "vue-waterfall-plugin-next/dist/style.css";
+import InfiniteLoading from "v3-infinite-loading";
+import { onMounted, reactive, ref, nextTick } from "vue";
 import backTop from "@/assets/svg/back_top.svg?component";
 import { LazyImg, Waterfall } from "vue-waterfall-plugin-next";
 
@@ -31,8 +33,8 @@ const options = reactive({
       rowPerView: 2
     }
   },
-  // 动画效果
-  animationEffect: "animate__fadeInUp",
+  // 动画效果 https://animate.style/
+  animationEffect: "animate__zoomInUp",
   // 动画时间
   animationDuration: 1000,
   // 动画延迟
@@ -53,15 +55,26 @@ const options = reactive({
 const page = ref(1);
 const list = ref([]);
 const pageSize = ref();
+const loadingInstance = ref();
 
 /** 加载更多 */
 function handleLoadMore() {
+  loadingInstance.value = ElLoading.service({
+    target: ".content",
+    background: "transparent",
+    text: "加载中"
+  });
   getList({
     page: page.value,
     pageSize: pageSize.value
   }).then(res => {
-    list.value.push(...res);
-    page.value += 1;
+    setTimeout(() => {
+      list.value.push(...res);
+      page.value += 1;
+      nextTick(() => {
+        loadingInstance.value.close();
+      });
+    }, 500);
   });
 }
 
@@ -79,73 +92,60 @@ onMounted(() => {
 </script>
 
 <template>
-  <el-card shadow="never" class="!h-[85vh]">
-    <template #header>
-      <div class="card-header">
-        <span class="font-medium">
-          瀑布流组件，采用开源的
-          <el-link
-            href="https://github.com/heikaimu/vue3-waterfall-plugin"
-            target="_blank"
-            style="margin: 0 4px 5px; font-size: 16px"
-          >
-            vue-waterfall-plugin-next
-          </el-link>
-        </span>
-      </div>
-    </template>
-    <el-scrollbar height="78vh" class="content">
-      <Waterfall :list="list" v-bind="options">
-        <template #item="{ item, url, index }">
-          <div
-            class="bg-gray-900 rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-linear hover:shadow-lg hover:shadow-gray-600 group"
-            @click="handleClick(item)"
-          >
-            <div class="overflow-hidden">
-              <LazyImg
-                :url="url"
-                class="cursor-pointer transition-all duration-300 ease-linear group-hover:scale-105"
-              />
-            </div>
-            <div class="px-4 pt-2 pb-4 border-t border-t-gray-800">
-              <h4 class="pb-4 text-gray-50 group-hover:text-yellow-300">
-                {{ item.name }}
-              </h4>
-              <div
-                class="pt-3 flex justify-between items-center border-t border-t-gray-600 border-opacity-50"
-              >
-                <div class="text-gray-50">$ {{ item.price }}</div>
-                <div>
-                  <button
-                    class="px-3 h-7 rounded-full bg-red-500 text-sm text-white shadow-lg transition-all duration-300 hover:bg-red-600"
-                    @click.stop="handleDelete(item, index)"
-                  >
-                    删除
-                  </button>
-                </div>
+  <el-scrollbar height="87vh" class="content">
+    <Waterfall :list="list" v-bind="options">
+      <template #item="{ item, url, index }">
+        <div
+          class="bg-gray-900 rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-linear hover:shadow-lg hover:shadow-gray-600 group"
+          @click="handleClick(item)"
+        >
+          <div class="overflow-hidden">
+            <LazyImg
+              :url="url"
+              class="cursor-pointer transition-all duration-300 ease-linear group-hover:scale-105"
+            />
+          </div>
+          <div class="px-4 pt-2 pb-4 border-t border-t-gray-800">
+            <h4 class="pb-4 text-gray-50 group-hover:text-yellow-300">
+              {{ item.name }}
+            </h4>
+            <div
+              class="pt-3 flex justify-between items-center border-t border-t-gray-600 border-opacity-50"
+            >
+              <div class="text-gray-50">$ {{ item.price }}</div>
+              <div>
+                <button
+                  class="px-3 h-7 rounded-full bg-red-500 text-sm text-white shadow-lg transition-all duration-300 hover:bg-red-600"
+                  @click.stop="handleDelete(item, index)"
+                >
+                  删除
+                </button>
               </div>
             </div>
           </div>
-        </template>
-      </Waterfall>
+        </div>
+      </template>
+    </Waterfall>
 
-      <div class="flex justify-center py-10">
+    <!-- <div class="flex justify-center py-10">
         <button
           class="px-5 py-2 rounded-full bg-gray-700 text-md text-white cursor-pointer hover:bg-gray-800 transition-all duration-300"
           @click="handleLoadMore"
         >
           加载更多
         </button>
-      </div>
+      </div> -->
 
-      <el-backtop
-        title="回到顶部"
-        :right="35"
-        :visibility-height="400"
-        target=".content .el-scrollbar__wrap"
-      >
-        <backTop />
-      </el-backtop>
-    </el-scrollbar>
-  </el-card>
+    <el-backtop
+      title="回到顶部"
+      :right="35"
+      :visibility-height="400"
+      target=".content .el-scrollbar__wrap"
+    >
+      <backTop />
+    </el-backtop>
+
+    <!-- 加载更多 -->
+    <InfiniteLoading :firstload="false" @infinite="handleLoadMore" />
+  </el-scrollbar>
 </template>