怎么在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); // 降低触发频率 } }) } });
四、实例:
let v = new Vue({ el: ".app", data(){ return { goods:[] } }, methods: { coupon() { this.goods.push("你呵呵") } } }){{item}}
vue是什么
Vue是一套用于构建用户界面的渐进式JavaScript框架,Vue与其它大型框架的区别是,使用Vue可以自底向上逐层应用,其核心库只关注视图层,方便与第三方库和项目整合,且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。
关于怎么在Vue中实现无限滚动加载指令就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
分享标题:怎么在Vue中实现无限滚动加载指令
网站链接:http://myzitong.com/article/pdshgh.html