vue中如何监听select滚动底部,vue指令实现滚动加载监听步骤详解

这次给大家带来vue指令实现滚动加载监听步骤详解，vue指令实现滚动加载监听的注意事项有哪些，下面就是实战案例，一起来看一下。既然你诚心诚意的发问了, 我就大发慈悲的告诉你.(武藏 & 小次郎)

指令可以很好的做这件事情, 下面以element-select举例:

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

Vue.directive('loadmore', {

bind(el, binding) {

// 获取element-ui定义好的scroll盒子

const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdownwrap');

SELECTWRAP_DOM.addEventListener('scroll', function() {

/*

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

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

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

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

* ele.scrollHeight - ele.scrollTop === ele.clientHeight;

*/

const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight;

if(CONDITION) {

binding.value();

}

});

}

})

组件中:

v-model="selectValue"

v-loadmore="loadMore">

v-for="item in options"

:key="item.id"

:label="item.accountName"

:value="item.id">

// methods

loadMore() {

// 这里可以做你想做的任何事 到底执行

},

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：