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

前言

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

相关推荐
秃了也弱了。18 分钟前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome
乆夨(jiuze)38 分钟前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
忧郁的蛋~1 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel
小彭努力中1 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
然我1 小时前
别再只用 base64!HTML5 的 Blob 才是二进制处理的王者,面试常考
前端·面试·html
NanLing1 小时前
【纯前端推理】纯端侧 AI 对象检测:用浏览器就能跑的深度学习模型
前端
呆呆的心1 小时前
前端必学:从盒模型到定位,一篇搞定页面布局核心 🧩
前端·css
小飞悟1 小时前
前端高手才知道的秘密:Blob 居然这么强大!
前端·javascript·html
小old弟1 小时前
用Sass循环实现炫彩文字跑马灯效果
前端
code_YuJun1 小时前
Promise 基础使用
前端·javascript·promise