突然有个人问起vue如何做滚动监听& # 63;
既然你诚心诚意的发问了,我就大发慈悲的告诉你。(武藏,小次郎)
指令可以很好的做这件事情,下面以element-select举例:
directives.js
//v-loadmore:用于在element-ui的选择下拉框加上滚动到底事件监听
Vue。指令(loadmore, {
绑定绑定(el) {//获取element-ui定义好的滚动盒子
const SELECTWRAP_DOM=el.querySelector (”。el-select-dropdown .el-select-dropdown__wrap”);
SELECTWRAP_DOM。addEventListener(“滚动”,函数(){/*
* scrollHeight获取元素内容高度(只读)
* scrollTop获取或者设置元素的偏移值,常用于,计算滚动条的位置,当一个元素的容器没有产生垂直方向的滚动条,那它的scrollTop的值默认为0。
* clientHeight读取元素的可见高度(只读)
*如果元素滚动到底,下面等式返回真,没有则返回错误的:
*避署。scrollHeight——避署。scrollTop===ele.clientHeight;
*/const条件=crollHeight——这一点。scrollTop & lt;=this.clientHeight;
如果(条件){
binding.value ();
}
});
}
})
之前
组件中:
& lt; template>
& lt; el-select
v模型=" selectValue "
v-loadmore=發oadMore”比;
& lt; el-option
v代表=把≡裣睢?
:关键=" item.id "
:label=" item.accountName "
:value=" https://www.yisu.com/zixun/item.id "比;
& lt;/el-option>
& lt;/el-select>
& lt;/template>//方法
loadMore () {//这里可以做你想做的任何事到底执行
},
之前
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
