需求小能手——赖加载选择器

前言

日常开发中我们经常用到选择器,比如el-select,当下拉选项数据量过大时,就会影响渲染速度,甚至会把页面卡死,对于这种情况我们一般采用懒加载的形式去优化,本节我们就来实现一个懒加载选择器。

懒加载

首先我们要理解懒加载,最常见的懒加载场景就是淘宝浏览图片,当我们把手机往下滑的时候,下面图片会转圈加载一会才出来,也就是下面的图片只有在用户滚动时候才会去加载。换到选择器是一个道理,先加载出来m条数据,当用户往下查找其他数据时候再加载出n条数据,整个过程中触发加载数据的事件是滚动事件,所以我们一般通过监听滚动事件实现懒加载。了解了实现方式,我们就能实现它,具体的技术栈采用vue2+element ui。

自定义指令

为了方便,我们直接对el-select进行二次封装,具体的props参数根据项目所需定义即可,重点是监听el-select滚动条实现懒加载。在vue中实现一个功能有很多种方式,这里我们自定义一个懒加载指令,方便实现,还可以提高可复用性。vue2中使用directives定义指令,对于el-select懒加载实现流程如下:

  1. 获取el-select中滚动条盒子,我们可以用开发者工具进行查看。
    很明显el-select是用el-scrollbar当作的滚动条,滚动盒子包含的类名有el-select-dropdown__wrap,我们就用这个类名,不用el-scrollbar__wrap是因为el-scrollbar用的地方比较多,用el-select相关的比较保险。
  2. 添加滚动条监听事件,当滚动条滚到一定的距离,就加载新的数据。我们可以从最简单的情况考虑,当滚动条滚动到底部才进行加载,如何判断呢?
    元素可见高度+滚动条高度=元素内容高度
    对应的属性值如下:
    scorllHeight ------------ 元素内容高度
    scrollTop ------------ 滚动条滚动高度
    clientHeight ------------ 元素的可见高度
    所以我们的判定条件就是:
js 复制代码
   ele.scrollHeight === ele.clientHeight + ele.scrollTop

一般我们会在滚动条到底之前就加载,滚动条到底部的这个距离我们可以设置成distance参数,根据开发需要传具体的值,最终判定条件变为:

js 复制代码
    ele.clientHeight + ele.scrollTop + distance >= e.scrollHeight
  1. 调用回调函数加载新数据。自定义指令中有binding参数,我们可以用它来执行加载新数据的事件,加载新数据的逻辑很简单,用slice去截取总的下拉数据。
js 复制代码
  // number 为加载个数
   loadMore() {
      const { length } = this.list
      this.list = this.totalData.slice(0, length + this.number)
    }

根据以上步骤我们自定义出v-lazy-load指令,用binding获取传递的参数:

然后我们在el-select中使用,注意我们要传递回调函数与参数:

接下来我们将上面的props参数补全:

到此我们就得到了一个懒加载选择器,最后我们需要优化一下过滤功能,因为列表加载的是部分数据,如果我们用el-select的filterable属性过滤的对象也是部分数据,所以我们需要自定义一下过滤方法,将过滤对象变为全部数据。

这样我们就得到了一个拥有过滤功能的懒加载选择器。

总结

我们采用了自定义指令实现了赖加载选择器,对比直接二次封装el-select,该方法更加方便,甚至可以把该指令变为全局指令,在需要的地方使用。

相关推荐
web守墓人44 分钟前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L1 小时前
CSS知识复习5
前端·css
许白掰1 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子5 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
中微子6 小时前
React 状态管理 源码深度解析
前端·react.js
加减法原则7 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele8 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4538 小时前
React移动端开发项目优化
前端·react.js·前端框架
天若有情6738 小时前
React、Vue、Angular的性能优化与源码解析概述
vue.js·react.js·angular.js
你的人类朋友8 小时前
🍃Kubernetes(k8s)核心概念一览
前端·后端·自动化运维