這次帶給大家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(); } }); } })
組件中:
// methods loadMore() { // 这里可以做你想做的任何事 到底执行 },
#相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
#houjs/hou-admin中引入ueditor編輯器步驟詳解
以上是vue指令實作捲動載入監聽步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
