快捷導(dǎo)航

vue3實現(xiàn)一個滾動分頁加載瀑布流列表過程

更新時間：2026年02月10日 08:53:25 作者：愛拍照的小碼農(nóng)

文章介紹了如何使用Vue3和JavaScript實現(xiàn)一個滾動分頁加載的瀑布流列表項目框架,主要選擇了vue-waterfall-next插件,并結(jié)合原生JavaScript實現(xiàn)了滾動加載功能,包括防抖處理以優(yōu)化頁面性能

實現(xiàn)一個滾動分頁加載瀑布流列表

項目框架：vue3+JS+vite

瀑布流框架：vue-waterfall-next

問了chatGPT，對于vue3有哪些好用的瀑布流插件，回答如下：

對于 Vue 3，有一些瀑布流插件可供選擇。以下是幾個常用的 Vue 3 瀑布流插件：

vue-waterfall-next：這是一個基于 Vue 3 的瀑布流插件，它提供了簡單易用的 API，可以幫助你實現(xiàn)瀑布流布局。它支持動態(tài)加載數(shù)據(jù)和無限滾動，并且具有自定義配置選項，如列數(shù)、間距等。
vue-masonry-wall：這是一個基于 Vue 3 的瀑布流插件，它使用 Masonry 布局算法來實現(xiàn)瀑布流效果。它支持自適應(yīng)布局和動態(tài)加載數(shù)據(jù)，并且可以根據(jù)需要進行自定義樣式。
vue-infinite-scroll：雖然不是專門針對瀑布流設(shè)計的插件，但它可以與瀑布流布局結(jié)合使用，實現(xiàn)無限滾動加載。它支持 Vue 3，并提供了簡單的指令來處理滾動加載的邏輯。

這些插件都可以通過 npm 安裝，并且有詳細的文檔和示例代碼，你可以根據(jù)自己的需求選擇合適的插件進行使用。記得檢查插件的版本和兼容性，以確保與你的 Vue 3 項目兼容。

結(jié)合項目實際，最后選擇用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'

由于該插件只能實現(xiàn)瀑布流布局，不能實現(xiàn)滾動分頁加載，而vant的無限滾動功能在此使用會有問題，所以無限滾動這塊用的是原生js去實現(xiàn)

具體代碼

如下所示：

// 父組件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([])
        
        //獲取接口數(shù)據(jù)
        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: {
                //當(dāng)屏幕寬度小于等于1200
                rowPerView: 4,
            },
            800: {
                //當(dāng)屏幕寬度小于等于800
                rowPerView: 3,
            },
            500: {
                //當(dāng)屏幕寬度小于等于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>

測試的時候發(fā)現(xiàn)滾動的太快頁面會出現(xiàn)抖動現(xiàn)象，所以在監(jiān)聽頁面滾動這里需要加一個防抖，代碼如下：

//防抖函數(shù)
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))
})