在element-ui的select下拉框如何实现滚动加载

这篇文章给大家分享的是有关在element-ui的select下拉框如何实现滚动加载的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

成都创新互联公司专注于交城企业网站建设,响应式网站建设,成都做商城网站。交城网站建设公司,为交城等地区提供建站服务。全流程按需网站设计，专业设计，全程项目跟踪，成都创新互联公司专业和态度为您提供的服务

这里通过自定义封装vue指令进行封装。

以下以element-ui中的select为例：

 在main.js同级别文件中添加directives.js:

// directives.js

import Vue from 'vue'
Vue.directive('loadmore', {
 bind (el, binding) {
  // 获取element-ui定义好的scroll盒子
  const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
  SELECTWRAP_DOM.addEventListener('scroll', function () {
   
   const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight
   if (CONDITION) {
    binding.value()
   }
  })
 }
})

• v-loadmore: 用于在element-ui的select下拉框加上滚动到底事件监听

• scrollHeight 获取元素内容高度(只读)

• scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.

• clientHeight 读取元素的可见高度(只读)

如果元素滚动到底, 下面等式返回true, 没有则返回false

scrollHeight - scrollTop === clientHeight

这里运用到了滚动偏移来做监听来处理，这与聊天对话框中默认下拉到底部的原理是大同小异的，后续我会有专门的文章进行讲解。

// main.js
// 注册滚动条加载触发事件v-loadmore绑定
import directives from './directives'
Vue.use(directives)

然后在组件中使用

感谢各位的阅读！关于“在element-ui的select下拉框如何实现滚动加载”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！