这次给大家带来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(); } }); } })
组件中:
<template>     <el-select v-model="selectvalue" v-loadmore="loadmore">         <el-option v-for="item in options" :key="item.id" :label="item.accountname" :value="item.id">         </el-option>     </el-select> </template> // methods loadmore() {     // 这里可以做你想做的任何事 到底执行 },
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
css常用样式总结
houjs/hou-admin中引入ueditor编辑器步骤详解
以上就是vue指令实现滚动加载监听步骤详解的详细内容。