From ca6459f2246db40d9bdc8128ac143a3b4129def6 Mon Sep 17 00:00:00 2001 From: xiaoxian521 <1923740402@qq.com> Date: Thu, 18 May 2023 17:10:43 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E7=80=91=E5=B8=83=E6=B5=81=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E6=B7=BB=E5=8A=A0=E6=97=A0=E9=99=90=E6=BB=9A=E5=8A=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- locales/zh-CN.yaml | 2 +- package.json | 1 + pnpm-lock.yaml | 9 ++ src/views/components/waterfall/index.vue | 126 +++++++++++------------ 4 files changed, 74 insertions(+), 64 deletions(-) diff --git a/locales/zh-CN.yaml b/locales/zh-CN.yaml index 4f34e4ce8..34f94a900 100644 --- a/locales/zh-CN.yaml +++ b/locales/zh-CN.yaml @@ -40,7 +40,7 @@ menus: hsmessage: 消息提示组件 hsvideo: 视频组件 hssegmented: 分段控制器组件 - hswaterfall: 瀑布流组件 + hswaterfall: 瀑布流无限滚动组件 hsmap: 地图组件 hsdraggable: 拖拽组件 hssplitPane: 切割面板 diff --git a/package.json b/package.json index 8c97b4324..94afcbaaa 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4c37fb0b1..8c7cc40ef 100644 --- a/pnpm-lock.yaml +++ b/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: { diff --git a/src/views/components/waterfall/index.vue b/src/views/components/waterfall/index.vue index 577540fe2..b072536a7 100644 --- a/src/views/components/waterfall/index.vue +++ b/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(() => {