怎么在Vue中实现无限滚动加载指令

这篇文章给大家介绍怎么在Vue中实现无限滚动加载指令，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

一、获取滚动条位置

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 - Scroll.top;   } }

二、给根节点绑定滚动事件

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); // 降低触发频率       }     })   } });

四、实例：

<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() {           this.goods.push("你呵呵")         }       }     })

vue是什么

Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。

关于怎么在Vue中实现无限滚动加载指令就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。