Vue 中如何實作滾動載入圖片或清單？

隨著 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。

1. vue-infinite-scroll 插件

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 陣列中。

2. vue-virtual-scroll-list 插件

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 等參數。

其中，size 參數指定了每個資料項的高度，remain 參數指定了預先渲染的數量，data-key 指定了用於唯一標識每個資料項的字段，data-sources 指定了需要渲染的資料列表，data-component 指定了資料項目的渲染元件。最後，我們在 load 事件中，執行非同步請求資料的邏輯。

結語

透過以上介紹，我們可以發現，Vue.js 中實作捲動載入圖片或清單有多種方式。自己寫程式碼實作雖然靈活，但是程式碼較多，需要花費一定的時間和精力；而使用第三方外掛程式雖然簡單，但需要深入了解外掛程式的原理和使用方法，才能更好地進行業務開發。因此，在實現滾動載入時，需要根據具體業務場景和自己的實力來選擇適合自己的方式。

以上是Vue 中如何實作滾動載入圖片或清單？的詳細內容。更多資訊請關注PHP中文網其他相關文章！