mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-06-06 00:18:51 +08:00
feat: 瀑布流组件添加无限滚动
This commit is contained in:
xiaoxian521
parent
d70b94111c
commit
ca6459f224
@ -40,7 +40,7 @@ menus:
|
||||
hsmessage: 消息提示组件
|
||||
hsvideo: 视频组件
|
||||
hssegmented: 分段控制器组件
|
||||
hswaterfall: 瀑布流组件
|
||||
hswaterfall: 瀑布流无限滚动组件
|
||||
hsmap: 地图组件
|
||||
hsdraggable: 拖拽组件
|
||||
hssplitPane: 切割面板
|
||||
|
||||
@ -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",
|
||||
|
||||
9
pnpm-lock.yaml
generated
9
pnpm-lock.yaml
generated
@ -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:
|
||||
{
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user