隨著 Web 應用程式越來越複雜，我們經常需要在頁面上展示大量的圖片或清單。如果一次載入所有的內容，會大大影響頁面的載入速度和使用者體驗。在這種情況下，滾動載入就成了一種非常流行的方式。
滾動加載，也叫無限滾動，指的是在用戶滾動頁面的過程中，透過 AJAX 技術，即時請求後續資料。這種技術在 Facebook、Twitter、Instagram 等社群媒體網站中廣泛應用，以實現高效體驗。
在 Vue.js 中，實現滾動載入的方式通常有兩種，一種是自己寫程式碼實現，另一種是使用第三方外掛程式。接下來，我們就一一進行介紹。
一、自己寫程式碼實作捲動載入
Vue.js 提供了一個非常方便的指令 v-scroll，可以用來監聽頁面的捲動事件。我們可以在滾動時，判斷 div 元素的 scrollTop 距離是否達到了底部，如果達到了底部就觸發後續資料請求。
下面是一個使用v-scroll 實作滾動載入圖片的範例程式碼：
<template>
<div class="image-list" v-scroll="onScroll">
<div class="image" v-for="image in images" :key="image.id">
<img :src="image.src" />
</div>
<div v-if="loading">加载中...</div>
</div>
</template>
<script>
export default {
data() {
return {
images: [],
loading: false,
page: 1,
pageSize: 10
}
},
mounted() {
this.loadImages()
},
methods: {
loadImages() {
this.loading = true
// 模拟请求数据，每次请求 10 条数据
setTimeout(() => {
let start = (this.page - 1) * this.pageSize
let end = start + this.pageSize
for (let i = start; i < end; i++) {
this.images.push({
id: i,
src: `http://www.example.com/images/${i}.jpg`
})
}
this.loading = false
this.page++
}, 1000)
},
onScroll(e) {
// 获取 div 元素的 scrollTop 和 clientHeight
let scrollTop = e.target.scrollTop
let clientHeight = e.target.clientHeight
let scrollHeight = e.target.scrollHeight
// 比较 scrollTop + clientHeight 和 scrollHeight
if (scrollTop + clientHeight >= scrollHeight) {
this.loadImages()
}
}
}
}
</script>在這個範例中，我們使用v-scroll 監聽了div 元素的滾動事件，並在onScroll 方法中判斷是否觸底，如果觸底則觸發loadImages 方法，該方法會模擬非同步請求資料並將資料push 到images 數組。此外，為了提升使用者體驗，我們新增了一個 loading 變量，用來即時提示資料正在載入中。
二、使用第三方外掛程式實現滾動載入
除了自己寫程式碼實作捲動載入外，我們還可以使用一些第三方外掛程式來實現滾動載入。這裡我們介紹一下比較常用的兩個插件，分別是 vue-infinite-scroll 和 vue-virtual-scroll-list。
vue-infinite-scroll 是一款基於Vue.js 實現的無限滾動插件，它能夠幫助我們實現滾動加載列表、圖片等場景。使用這個外掛程式非常簡單，只需要在需要實作捲動載入的元件中，加入 v-infinite-scroll 指令，然後指定需要觸發捲動載入的方法即可。
下面是一個使用vue-infinite-scroll 插件實現滾動載入清單的範例程式碼：
<template>
<div class="list" v-infinite-scroll="loadMore">
<div class="item" v-for="(item, index) in items" :key="index">
{{ item.text }}
</div>
</div>
</template>
<script>
import InfiniteScroll from 'vue-infinite-scroll'
export default {
mixins: [InfiniteScroll],
data() {
return {
items: []
}
},
methods: {
loadMore() {
// 模拟异步请求数据
setTimeout(() => {
for (let i = 0; i < 10; i++) {
this.items.push({ text: `Item ${this.items.length + 1}` })
}
}, 1000)
}
}
}
</script>在這個範例中，我們先透過npm 安裝了vue-infinite-scroll 插件，並將其引入到組件中。然後，我們使用 mixins 將自動建立一個可觸發的 infinite-scroll 事件的 Vue 實例混入到目前元件中。最後，我們在 v-infinite-scroll 指令中指定 loadMore 方法，該方法會模擬非同步請求資料並將資料 push 到 items 陣列中。
vue-virtual-scroll-list 是一款基於Vue.js 實現的虛擬滾動插件，能夠幫助我們快速實現大數據量的列表滾動，提高頁面效能和使用者體驗。與傳統的滾動載入不同的是，vue-virtual-scroll-list 採用了虛擬滾動技術，只渲染當前可見區域內的資料項，從而避免了大量的DOM 渲染和重排，提高了頁面的效率和流暢度。
下面是一個使用vue-virtual-scroll-list 外掛程式實現滾動載入清單的範例程式碼：
<template>
<virtual-list
:size="50"
:remain="10"
:data-key="'id'"
:data-sources="items"
:data-component="$options.components.item"
@load="loadMore"
>
</virtual-list>
</template>
<script>
import VirtualList from 'vue-virtual-scroll-list'
import Item from './Item.vue'
export default {
components: { Item },
data() {
return {
items: []
}
},
methods: {
loadMore(start, end) {
// 模拟异步请求数据
setTimeout(() => {
let count = end - start
for (let i = 0; i < count; i++) {
this.items.push({ id: this.items.length + 1, text: `Item ${this.items.length + 1}` })
}
}, 1000)
}
}
}
</script>在這個範例中，我們先透過npm 安裝了vue-virtual-scroll- list 插件，並將其引入元件中。然後，我們在模板中使用
其中，size 參數指定了每個資料項的高度，remain 參數指定了預先渲染的數量，data-key 指定了用於唯一標識每個資料項的字段，data-sources 指定了需要渲染的資料列表，data-component 指定了資料項目的渲染元件。最後，我們在 load 事件中，執行非同步請求資料的邏輯。
結語
透過以上介紹，我們可以發現，Vue.js 中實作捲動載入圖片或清單有多種方式。自己寫程式碼實作雖然靈活，但是程式碼較多，需要花費一定的時間和精力；而使用第三方外掛程式雖然簡單，但需要深入了解外掛程式的原理和使用方法，才能更好地進行業務開發。因此，在實現滾動載入時，需要根據具體業務場景和自己的實力來選擇適合自己的方式。
以上是Vue 中如何實作滾動載入圖片或清單？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
