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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213

测试的时候发现滚动的太快页面会出现抖动现象，所以在监听页面滚动这里需要加一个防抖，代码如下：

//防抖函数
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))
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14