Vue⽆限滚动加载指令实现⽅法
也不存在什么加载咯，就是⼀个判断滚动条是否到达浏览器底部了。如果到了就触发事件，⽶到就不处理。计算公式提简单的底部等于（0） =  滚动条⾼度 - 滚动条顶部距离 - 可视⾼度。反正结果就是0。
⼀、获取滚动条位置
class Scroll {
static get top() {
return Math.max(document.documentElement.scrollTop || document.body.scrollTop);
}
static get clientHeight() {
return Math.max(document.documentElement.clientHeight || document.body.clientHeight);
}
static get clientWidth() {
return Math.max(document.documentElement.clientWidth || document.body.clientWidth);
}
static get height() {
return Math.max(document.documentElement.scrollHeight || document.body.scrollHeight);
}
static get width() {
return Math.max(document.documentElement.scrollWidth || document.body.scrollWidth);
}
static get bottom() {
return Scroll.height - Scroll.clientHeight - p;
}
}
⼆、给根节点绑定滚动事件
vue给body元素绑定滚动条事件，真TMD。事件绑定上去了妈的就是不触发事件。不知道什么⿁问题。最后直接给根节点HTML绑定滚动事件。
const on = (function () {
if (document.addEventListener) {
return function (element, event, handler) {
if (element && event && handler) {
element.addEventListener(event, handler, false);
}
};
} else {
return function (element, event, handler) {
if (element && event && handler) {
element.attachEvent('on' + event, handler);
}
};
}
})();
三、注册全局指令
/**
* 降低事件执⾏频率
*/
const downsampler = (function () {
let result = null;
return function (time, func) {
if (!result) {
result = setTimeout(function () {
func();
result = null;
}, time);
}
}
})();
Vue.directive("infinite-scroll", {
bind(el, binding, vnode) {
on(window, 'scroll', function () {
if (typeof binding.value === "function" && Scroll.bottom <= 50) {  // ⼩于50就触发
downsampler(50, binding.value); // 降低触发频率
}
})
}
});
四、实例：
element表格横向滚动条<div class="app" v-infinite-scroll="coupon">
<template v-for="item in goods">
<p>{{item}}</p>
</template>
</div>
let v = new Vue({
el: ".app",
data(){
return {
goods:[]
}
},
methods: {
coupon() {
}
}
})
总结
以上所述是⼩编给⼤家介绍的Vue ⽆限滚动加载指令实现⽅法，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！
如果你觉得本⽂对你有帮助，欢迎转载，烦请注明出处，谢谢！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。