Vue指令如何实现滚动加载与监听功能？

本文共计449个文字，预计阅读时间需要2分钟。

有人问起Vue如何做滚动监听，既然你这么有信心，那我就大发慈悲地告诉你。下面是一些简单的方法，指令示例以element-select的v-loadmore为例：

javascript// directives.jsVue.directive('v-loadmore', { bind(el, binding) { const callback=binding.value; const options={ root: null, rootMargin: '0px', threshold: 1.0 };

const observer=new IntersectionObserver(entries=> { entries.forEach(entry=> { if (entry.isIntersecting) { callback(); observer.unobserve(el); } }); }, options);

observer.observe(el); }});

然后在你的Vue组件中使用它：

这样，当滚动到指定元素时，就会触发`loadMoreData`方法。

突然有个人问起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() { // 这里可以做你想做的任何事 到底执行 },

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。