Vue 虛擬列表的實(shí)戰(zhàn)示例

更新時(shí)間：2021年03月18日 09:46:47 作者：掘金安東尼

這篇文章主要介紹了Vue 虛擬列表的實(shí)現(xiàn)示例，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下

序言

現(xiàn)如今，我們總是在無止境的刷。刷微博、刷抖音、刷沸點(diǎn)......一次次絲滑下拉體驗(yàn)的背后卻是前端攻城獅的用心。

本篇討論基于 Vue.js 的列表無限下拉實(shí)踐。

我們的目標(biāo)就是：讓列表下拉縱享絲滑，而不是像以往的下拉就 loading 等待的體驗(yàn)。

譯自 Better Programming
在線 Demo

設(shè)計(jì)

咱還是用 Vue CLI 來快速構(gòu)建項(xiàng)目。

這是主頁面：

// EndlessList.vue

<template>
 <div class="endless-scrolling-list">
  <!-- 搜索框 -->
  <div class="search-box">
   <input type="text" v-model="searchQuery"/>
  </div>
  <p class="center" v-if="results.length == 0 && !loading">
   Start typing to search something.
  </p>
  <!-- 虛擬列表 -->
  <virtual-list
   :data-key="'pageid'"
   :data-sources="results"
   :data-component="itemComponent"
   :page-mode="true"
   />
  <!-- loading -->
  <loader v-if="loading" />
 </div>
</template>

其中核心當(dāng)然是virtual-list組件啦~

這里的虛擬列表，我們用到一個(gè)三方庫 Vue Virtual Scroll List，它在 Github 上又 2.5k+ 的 stars。類比于 react 的 react-virtualized 庫。

大量的 DOM 元素會(huì)使得我們的網(wǎng)頁非?！爸亍?。當(dāng) DOM 元素超過 1500 至 2000 個(gè)的時(shí)候，頁面就開始又延遲，尤其是在小型的、性能差的設(shè)備上尤為明顯。

想象一下，有一個(gè)無線滾動(dòng)的頁面，你不斷的下拉，它實(shí)際上可能形成了上萬個(gè) DOM 元素，每個(gè)元素還包含子節(jié)點(diǎn)，這樣將消耗巨大的性能。

Virtual scrollers 正是來解決這個(gè)問題的。

如上圖，已經(jīng)表示的很清楚了。列表分為可見區(qū)域和緩沖區(qū)域，超出這個(gè)范圍的列表 DOM 都將被刪除。

好啦，準(zhǔn)備工作已就緒，Let`s get it!

實(shí)現(xiàn)

// imports.js（EndlessList.vue）

import axios from 'axios';
import lodash from 'lodash';
import VirtualList from 'vue-virtual-scroll-list';
import SearchResult from './SearchResult';
import Loader from './Loader';
export default {
 name: 'EndlessList',
 components: {
  VirtualList,
  Loader
 },
 data() {
  return {
   searchQuery: '',
   currentPage: 0,
   results: [],
   itemComponent: SearchResult,
   loading: false
  }
 },
};

我們引入第三方庫 axios 和 loadsh，以便后續(xù)使用。

其中，itemComponent 是 virtual-list 的屬性，為此我們需要新建一個(gè) SearchResult 子組件，作為搜索結(jié)果單元。

代碼如下：

// SearchResult.vue

<template>
 <div class="list-item">
  <h3>
   {{ source.title }}
  </h3>
  <div v-html="source.snippet"></div>
 </div>
</template>

<script>
export default {
 props: {
  index: {
   // index of current item
   type: Number,
  },
  source: {
   type: Object,
   default() {
    return {};
   },
  },
 },
};
</script>

<style scoped>
.list-item {
 padding: 0 10px 20px 10px;
}
.list-item h3 {
 margin: 0;
 padding-bottom: 10px;
}
</style>

我們可以通過搜索標(biāo)題或描述來得到結(jié)果，請求數(shù)據(jù)來源于維基百科。

search(query, page) {
 // We prepare the data that the Wikipedia API expects.
 const data = {
  action: "query",
  format: "json",
  list: "search",
  continue: "-||",
  utf8: 1,
  srsearch: query,
  sroffset: page * 10,
  origin: "*",
 };
 // And then we convert these params TO GET params in the format
 // action=query&format=json ...
 const params = Object.keys(data)
  .map(function(k) {
   return data[k] == ""
    ? ""
    : encodeURIComponent(k) + "=" + encodeURIComponent(data[k]);
  })
  .join("&");
 // We prepare the url with the params string
 const searchUrl = `https://en.wikipedia.org/w/api.php?${params}`;
 // we set loading to true so that we can display the loader 
 this.loading = true;
 // Then we execute the request and concatenate the results
 axios.get(searchUrl).then((response) => {
  this.results = this.results.concat(response.data.query.search);
  // And of course set loading to false to hide the loader.
  this.loading = false;
 });
}

搜索的方法已經(jīng)寫好，接著就是調(diào)用。

當(dāng)用戶鍵入內(nèi)容的搜索時(shí)候會(huì)調(diào)用。
當(dāng)下拉的時(shí)候會(huì)調(diào)用。

// EndlessList.vue

<script>
export default {
 // data() and methods skipped for brevity
 watch: {
  searchQuery: {
   immediate: true,
   handler: lodash.debounce(function (newVal) {
    if (newVal == "") {
     return;
    }
    this.results = [];
    this.currentPage = 0;
    this.search(newVal, this.currentPage);
    this.search(newVal, this.currentPage + 1);
    this.currentPage = 2;
   }, 200),
  },
 },
 mounted() {
  const vm = this;
  window.onscroll = lodash.debounce(function () {
   var distanceFromBottom =
    document.body.scrollHeight - window.innerHeight - window.scrollY;
   if (distanceFromBottom < 400 && vm.searchQuery !== "") {
    vm.search(vm.searchQuery, vm.currentPage);
    vm.currentPage++;
   }
  }, 100, {leading: true});
 },
}
</script>

顯而易見，當(dāng) searchQuery 變化的時(shí)候，我們會(huì)得到新的搜索結(jié)果。當(dāng)然，這里的輸入框也用到了防抖函數(shù)。

另一個(gè)需要注意的是，我們第一次搜索加載了兩頁的結(jié)果，用戶就會(huì)有一定的滾動(dòng)空間，這樣就可以保持順暢的感覺。

我們在滾動(dòng)的事件中也加了防抖函數(shù)。這里設(shè)一個(gè)疑問：為什么要在 window.onscroll 事件下設(shè)置 leading 為 true ？

然后我們運(yùn)行程序看效果：