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

前言

日常开发中我们经常用到选择器,比如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,该方法更加方便,甚至可以把该指令变为全局指令,在需要的地方使用。

相关推荐
JarvanMo5 分钟前
10 个能帮你节省大量开发时间的低估 Flutter 组件
前端
去伪存真8 分钟前
公司前端项目ESLint规则集统一化
前端
鹏多多12 分钟前
使用imaskjs实现js表单输入卡号/日期/货币等掩码的教程
前端·javascript·vue.js
w2vmany13 分钟前
postmessage xss初步学习
前端·学习·xss
小张成长计划..1 小时前
前端6:CSS3 2D转换,CSS3动画,CSS3 3D转换
前端·3d·css3
IT_陈寒1 小时前
Vue3性能优化实战:这7个技巧让我的应用加载速度提升50%!
前端·人工智能·后端
西西学代码1 小时前
Flutter---音效模式选择器
前端·html
TLucas1 小时前
Layui连线题编辑器组件(ConnectQuestion)
前端·编辑器·layui
艾小码1 小时前
告别页面呆板!这5个DOM操作技巧让你的网站活起来
前端·javascript
正在学习前端的---小方同学3 小时前
vue-easy-tree树状结构
前端·javascript·vue.js