<html>
<head>
<title></title>
<script src="./jquery-3.1.0.js"></script>
</head>
<body>
<select class="my_selected" data-edit-select="1" onmousedown="if(this.options.length>3){this.size=8}" onblur="this.size=0" onchange="this.size=0" style="position:absolutez-index:1">
<option selected>选择</option>
<option>一</option>
<option>二</option>
<option>三</option>
<option>四</option>
<option>五</option>
<option>六</option>
<option>七</option>
<option>八</option>
<option>九</option>
<option>十</option>
</select>
</body>
</html>
1、在项目的main.js里注册// 注册滚动条加载触发事件v-loadmore绑定
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
2.在需要的下拉地方写方法 如下图：
借鉴于 https://blog.csdn.net/weixin_30498921/article/details/95057744
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）