vue3实现一个滚动分页加载瀑布流列表
项目框架：vue3+JS+vite
瀑布流框架：vue-waterfall-next
问了chatGPT，对于vue3有哪些好用的瀑布流插件，回答如下：
对于 Vue 3，有一些瀑布流插件可供选择。以下是几个常用的 Vue 3 瀑布流插件：
vue-waterfall-next：这是一个基于 Vue 3 的瀑布流插件，它提供了简单易用的 API，可以帮助你实现瀑布流布局。它支持动态加载数据和无限滚动，并且具有自定义配置选项，如列数、间距等。
vue-masonry-wall：这是一个基于 Vue 3 的瀑布流插件，它使用 Masonry 布局算法来实现瀑布流效果。它支持自适应布局和动态加载数据，并且可以根据需要进行自定义样式。
vue-infinite-scroll：虽然不是专门针对瀑布流设计的插件，但它可以与瀑布流布局结合使用，实现无限滚动加载。它支持 Vue 3，并提供了简单的指令来处理滚动加载的逻辑。
这些插件都可以通过 npm 安装，并且有详细的文档和示例代码，你可以根据自己的需求选择合适的插件进行使用。记得检查插件的版本和兼容性，以确保与你的 Vue 3 项目兼容。
结合项目实际，最后选择用vue-waterfall-next，
插件可在github上找到，用法如下：
安装
npm install vue-waterfall-plugin-next
使用
在vue项目中引入：
import { LazyImg, Waterfall } from ‘vue-waterfall-plugin-next’
import ‘vue-waterfall-plugin-next/dist/style.css’
由于该插件只能实现瀑布流布局，不能实现滚动分页加载，而vant的无限滚动功能在此使用会有问题，所以无限滚动这块用的是原生js去实现
具体代码如下：
// 父组件index.vue
<template>
<div class="container" id="main">
<productCard :productList="productList">productCard>
<div class="loading-text" v-if="loading">加载中...div>
<div class="loading-text" v-if="finish">没有更多了div>
div>
template>
<script>
import productCard from '@/components/productCard.vue'
import { getAllGoods } from '@/api/modules/good.js'
export default {
components: {
productCard,
},
setup() {
const page = ref(0)
const size = ref(8)
const loading = ref(false)
const finish = ref(false)
const productList = ref([])
//获取接口数据
const getProduct = () => {
loading.value = true
const params = {
page: page.value,
size: size.value,
body: {
goodsTypeID: className,
},
}
getAllGoods (params)
.then(res => {
if (res.code === 20000) {
total.value = Number(res.data.totalPages)
if (res.data.list.length > 0) {
productList.value = [...productList.value, ...res.data.list]
}
if (page.value == total.value + 1) {
finish.value = true
loading.value = false
}
} else {
loading.value = false
finish.value = true
}
})
.catch(err => {
loading.value = false
finish.value = true
})
}
const handleScroll = () => {
const scrollHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight)
//滚动条滚动距离
const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
//窗口可视范围高度
const clientHeight =
window.innerHeight || Math.min(document.documentElement.clientHeight, document.body.clientHeight)
if (clientHeight + scrollTop >= scrollHeight && page.value <= total.value) {
//快到底时----加载
page.value++
getProduct()
}
}
onMounted(() => {
getProduct(tabModule.activeType.value, tabModule.activeClass.value)
window.addEventListener('scroll', handleScroll)
})
onUnmounted(() => {
window.removeEventListener('scroll', handleScroll)
})
return {
productList,
loading,
finish,
}
}
}
script>
<style lang="scss" scoped>
.loading-text {
text-align: center;
position: absolute;
left: 0;
right: 0;
z-index: 999;
margin: auto;
padding: 20px 0;
font-size: 16px;
}
:deep(.waterfall-list) {
background: none;
}
.container {
padding: 0 12px;
}
style>
// 子组件productCard.vue
<template>
<Waterfall :lazyload="false" :breakpoints="breakpoints" :gutter="8" :list="list">
<template #item="{ item, url, index }">
<div class="card_content">
<div class="card_img" :class="{ active: !item.goodsPicture && !item.storePicture }">
<LazyImg class="cover" :url="item.goodsPicture || item.storePicture || item.storeLogo" />
div>
<div class="content">
<div class="store" v-if="item.type === 2">{{ item.storeName }}div>
<div class="title" v-if="item.type === 1">{{ item.storeName }}div>
<div class="title" v-if="item.type === 2">{{ item.goodsName }}div>
<div class="tags">
<div class="tags-item" v-for="(ele, index) in item.tags" :key="index">
{{ ele }}
div>
div>
div>
div>
template>
Waterfall>
template>
<script>
import { computed, ref } from 'vue'
import { LazyImg, Waterfall } from 'vue-waterfall-plugin-next'
import 'vue-waterfall-plugin-next/dist/style.css'
export default {
props: {
productList: Array,
},
components: {
LazyImg,
Waterfall,
},
setup(props) {
const list = computed(() => {
return props.productList
})
const breakpoints = ref({
1200: {
//当屏幕宽度小于等于1200
rowPerView: 4,
},
800: {
//当屏幕宽度小于等于800
rowPerView: 3,
},
500: {
//当屏幕宽度小于等于500
rowPerView: 2,
},
})
return {
breakpoints,
list,
}
},
}
script>
<style lang="scss" scoped>
.card_content {
border-radius: 4px;
background: #fff;
box-sizing: border-box;
.card_img {
margin-bottom: 7px;
&.active {
border: 1px solid #e7e7e7;
}
:deep(.lazy__img) {
width: 100%;
border-radius: 4px;
font-size: 0;
height: 100%;
}
}
.content {
padding: 0 8px;
.store {
color: rgba(0, 0, 0, 0.4);
font-size: 12px;
font-weight: 400;
margin-bottom: 4px;
}
.title {
font-size: 16px;
font-weight: 500;
margin-bottom: 14px;
}
.tags {
display: flex;
flex-wrap: wrap;
.tags-item {
background: rgba(153, 151, 255, 0.05);
border-radius: 2px;
padding: 3px 4px;
margin: 0 5px 5px 0;
color: rgba(0, 0, 0, 0.4);
font-size: 12px;
border: 1px solid rgb(244, 244, 249);
&:last-child {
margin-right: 0;
}
}
}
}
}
style>
测试的时候发现滚动的太快页面会出现抖动现象，所以在监听页面滚动这里需要加一个防抖，代码如下：
//防抖函数
const debounce = (fn, delay) => {
let timeout
return function () {
clearTimeout(timeout)
timeout = setTimeout(() => {
fn.apply(this, arguments)
}, delay)
}
}
onMounted(() => {
getProduct()
window.addEventListener('scroll', debounce(handleScroll, 200))
})