这篇文章给大家分享的是有关在element-ui的select下拉框如何实现滚动加载的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
麻阳ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为
成都创新互联公司的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：18982081108（备注：SSL证书合作）期待与您的合作！
这里通过自定义封装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下拉框如何实现滚动加载”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
网站题目：在element-ui的select下拉框如何实现滚动加载-创新互联
本文路径：
http://cdkjz.cn/article/ccpsie.html
