Vue Infinite 是一個基于 Vue.js 的無限下拉加載組件，可以幫助開發者輕松實現無限滾動邏輯。該組件提供了多種配置選項，可以滿足不同的需求。

使用 Vue Infinite，只需要簡單地在模板中添加組件標簽，并綁定數據源及加載方法即可：

<template>
<div>
<ul>
<li v-for="item in items" :key="item">{{ item }}</li>
</ul>
<vue-infinite
v-if="!loading"
:distance="10"
:directions="['bottom']"
@infinite="loadMore"
/>
<p v-else>Loading...</p>
</div>
</template>
<script>
import VueInfinite from 'vue-infinite'
export default {
components: {
VueInfinite
},
data () {
return {
items: [],
loading: false,
page: 1
}
},
mounted () {
this.loadMore()
},
methods: {
loadMore () {
this.loading = true
// 發送請求獲取數據，省略...
// 模擬異步獲取數據
setTimeout(() =>{
this.items.push(`Item ${this.page++}`)
this.loading = false
}, 1000)
}
}
}
</script>

代碼中，我們使用了 Vue Infinite 組件，并配置了 distance、directions 和 infinite 事件。其中，distance 表示滾動到離底部還有 10px 時觸發加載；directions 表示只有向下滾動時才會觸發加載；infinite 事件則會在滿足條件時調用 loadMore 方法，向服務器請求數據。loadMore 方法會將獲取到的數據添加到 items 數組中，并將 loading 狀態置為 false。

通過使用 Vue Infinite，我們可以很方便地實現無限滾動效果，提升用戶體驗和頁面性能。