这篇文章主要介绍了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-dropdown__wrap'); 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() { // 这里可以做你想做的任何事 到底执行 },
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章: