vue指令做滚动加载和监听等
突然有个人问起vue如何做滚动监听?
既然你诚心诚意的发问了,我就大发慈悲的告诉你.(武藏&小次郎)
指令可以很好的做这件事情,下面以element-select举例:
directives.js
//v-loadmore:用于在element-ui的select下拉框加上滚动到底事件监听
Vue.directive('loadmore',{
bind(el,binding){
//获取element-ui定义好的scroll盒子
constSELECTWRAP_DOM=el.querySelector('.el-select-dropdown.el-select-dropdown__wrap');
SELECTWRAP_DOM.addEventListener('scroll',function(){
/*
*scrollHeight获取元素内容高度(只读)
*scrollTop获取或者设置元素的偏移值,常用于,计算滚动条的位置,当一个元素的容器没有产生垂直方向的滚动条,那它的scrollTop的值默认为0.
*clientHeight读取元素的可见高度(只读)
*如果元素滚动到底,下面等式返回true,没有则返回false:
*ele.scrollHeight-ele.scrollTop===ele.clientHeight;
*/
constCONDITION=this.scrollHeight-this.scrollTop<=this.clientHeight;
if(CONDITION){
binding.value();
}
});
}
})
组件中:
//methods loadMore(){ //这里可以做你想做的任何事到底执行 },
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。