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

locales/zh-CN.yaml

@@ -40,7 +40,7 @@ menus:
   hsmessage: 消息提示组件
   hsvideo: 视频组件
   hssegmented: 分段控制器组件
-  hswaterfall: 瀑布流组件
+  hswaterfall: 瀑布流无限滚动组件
   hsmap: 地图组件
   hsdraggable: 拖拽组件
   hssplitPane: 切割面板

package.json

@@ -65,6 +65,7 @@
     "swiper": "^9.3.1",
     "typeit": "^8.7.1",
     "v-contextmenu": "3.0.0",
+    "v3-infinite-loading": "^1.2.2",
     "vue": "^3.3.2",
     "vue-i18n": "^9.2.2",
     "vue-json-pretty": "^2.2.4",

pnpm-lock.yaml

@@ -93,6 +93,7 @@ specifiers:
   typeit: ^8.7.1
   typescript: ^5.0.4
   v-contextmenu: 3.0.0
+  v3-infinite-loading: ^1.2.2
   vite: ^4.3.7
   vite-plugin-cdn-import: ^0.3.5
   vite-plugin-compression: ^0.5.1
@@ -151,6 +152,7 @@ dependencies:
   swiper: 9.3.1
   typeit: 8.7.1
   v-contextmenu: 3.0.0_vue@3.3.2
+  v3-infinite-loading: 1.2.2
   vue: 3.3.2
   vue-i18n: 9.2.2_vue@3.3.2
   vue-json-pretty: 2.2.4_vue@3.3.2
@@ -11660,6 +11662,13 @@ packages:
       vue: 3.3.2
     dev: false
 
+  /v3-infinite-loading/1.2.2:
+    resolution:
+      {
+        integrity: sha512-MWJc6yChnqeUasBFJ3Enu8IGPcQgRMSTrAEtT1MsHBEx+QjwvNTaY8o+8V9DgVt1MVhQSl3MC55hsaWLJmpRMw==
+      }
+    dev: false
+
   /v8-compile-cache-lib/3.0.1:
     resolution:
       {

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 => {
+    setTimeout(() => {
       list.value.push(...res);
       page.value += 1;
+      nextTick(() => {
+        loadingInstance.value.close();
+      });
+    }, 500);
   });
 }
 
@@ -79,22 +92,7 @@ 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">
+  <el-scrollbar height="87vh" class="content">
     <Waterfall :list="list" v-bind="options">
       <template #item="{ item, url, index }">
         <div
@@ -129,14 +127,14 @@ onMounted(() => {
       </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="回到顶部"
@@ -146,6 +144,8 @@ onMounted(() => {
     >
       <backTop />
     </el-backtop>
+
+    <!-- 加载更多 -->
+    <InfiniteLoading :firstload="false" @infinite="handleLoadMore" />
   </el-scrollbar>
-  </el-card>
 </template>