服务器之家:专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - vue.js - Vue 虚拟列表的实战示例

Vue 虚拟列表的实战示例

2022-02-19 17:42掘金安东尼 vue.js

这篇文章主要介绍了Vue 虚拟列表的实现示例,帮助大家更好的理解和学习使用vue,感兴趣的朋友可以了解下

序言

现如今,我们总是在无止境的刷。刷微博、刷抖音、刷沸点......一次次丝滑下拉体验的背后却是前端攻城狮的用心。

本篇讨论基于 Vue.js 的列表无限下拉实践。

我们的目标就是:让列表下拉纵享丝滑,而不是像以往的下拉就 loading 等待的体验。

设计

咱还是用 Vue CLI 来快速构建项目。

这是主页面:

// 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>

其中核心当然是virtual-list组件啦~

这里的虚拟列表,我们用到一个三方库 Vue Virtual Scroll List,它在 Github 上又 2.5k+ 的 stars。类比于 react 的 react-virtualized 库。

Vue 虚拟列表的实战示例

大量的 DOM 元素会使得我们的网页非常“重”。当 DOM 元素超过 1500 至 2000 个的时候,页面就开始又延迟,尤其是在小型的、性能差的设备上尤为明显。

想象一下,有一个无线滚动的页面,你不断的下拉,它实际上可能形成了上万个 DOM 元素,每个元素还包含子节点,这样将消耗巨大的性能。

Virtual scrollers 正是来解决这个问题的。

如上图,已经表示的很清楚了。列表分为可见区域和缓冲区域,超出这个范围的列表 DOM 都将被删除。

好啦,准备工作已就绪,Let`s get it!

实现

// 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,以便后续使用。

其中,itemComponent 是 virtual-list 的属性,为此我们需要新建一个 SearchResult 子组件,作为搜索结果单元。

代码如下:

// 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>

我们可以通过搜索标题或描述来得到结果,请求数据来源于维基百科。

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;
 });
}

搜索的方法已经写好,接着就是调用。

  1. 当用户键入内容的搜索时候会调用。
  2. 当下拉的时候会调用。

// 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>

显而易见,当 searchQuery 变化的时候,我们会得到新的搜索结果。当然,这里的输入框也用到了防抖函数。

另一个需要注意的是,我们第一次搜索加载了两页的结果,用户就会有一定的滚动空间,这样就可以保持顺畅的感觉。

我们在滚动的事件中也加了防抖函数。这里设一个疑问:为什么要在 window.onscroll 事件下设置 leading 为 true ?

然后我们运行程序看效果:

Vue 虚拟列表的实战示例

npm run dev

Vue 虚拟列表的实战示例

如何?只要你不是疯狂下拉,基本上感受不到 loading 的过程~

小结

用户不会希望每下拉十条结果就要等待新的十条结果加载出来!所以我们需要有缓冲区,还未下拉到底的时候就预判它到底然后提前加载。这便是丝滑体验的内核。

当然不在视图区和缓冲区的 DOM 都将被删除,这也是页面不形成大量 DOM 元素的精髓。

这样动态的处理列表的确是编程人员的一种智慧和用心。

你可以把 项目  克隆到本地再体会一下。以上便是本次分享~

以上就是Vue 虚拟列表的实现示例的详细内容,更多关于Vue 虚拟列表的资料请关注服务器之家其它相关文章!

原文链接:https://juejin.cn/post/6937939870018961439

延伸 · 阅读

精彩推荐
  • vue.jsVue2.x 项目性能优化之代码优化的实现

    Vue2.x 项目性能优化之代码优化的实现

    这篇文章主要介绍了Vue2.x 项目性能优化之代码优化的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋...

    优小U9632022-02-21
  • vue.jsVue中引入svg图标的两种方式

    Vue中引入svg图标的两种方式

    这篇文章主要给大家介绍了关于Vue中引入svg图标的两种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的...

    十里不故梦10222021-12-31
  • vue.js用vite搭建vue3应用的实现方法

    用vite搭建vue3应用的实现方法

    这篇文章主要介绍了用vite搭建vue3应用的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下...

    Asiter7912022-01-22
  • vue.js详解vue 表单绑定与组件

    详解vue 表单绑定与组件

    这篇文章主要介绍了vue 表单绑定与组件的相关资料,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下...

    Latteitcjz6432022-02-12
  • vue.jsVue多选列表组件深入详解

    Vue多选列表组件深入详解

    这篇文章主要介绍了Vue多选列表组件深入详解,这个是vue的基本组件,有需要的同学可以研究下...

    yukiwu6752022-01-25
  • vue.jsVue2.x-使用防抖以及节流的示例

    Vue2.x-使用防抖以及节流的示例

    这篇文章主要介绍了Vue2.x-使用防抖以及节流的示例,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下...

    Kyara6372022-01-25
  • vue.js梳理一下vue中的生命周期

    梳理一下vue中的生命周期

    看过很多人讲vue的生命周期,但总是被绕的云里雾里,尤其是自学的同学,可能js的基础也不是太牢固,听起来更是吃力,那我就已个人之浅见,以大白话...

    CRMEB技术团队7992021-12-22
  • vue.jsVue项目中实现带参跳转功能

    Vue项目中实现带参跳转功能

    最近做了一个手机端系统,其中遇到了父页面需要携带参数跳转至子页面的问题,现已解决,下面分享一下实现过程,感兴趣的朋友一起看看吧...

    YiluRen丶4302022-03-03