欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue 无限滚动加载指令

程序员文章站 2022-03-29 08:14:12
...

Vue.directive('scroll', {
    // 当被绑定的元素插入到 DOM 中时……
    bind: function(el, binding, vnode) {
        el.style.overflow = 'auto'
        let distance = 10;
        let _this = this;
        let busy = el.getAttribute("busy");
        let goOn = false;
        if (busy) {
            vnode.context.$watch(busy, function(value) {
                goOn = value;
            });
        }
        el.addEventListener("scroll", function() {
            var scrollTop = el.scrollTop;
            var viewHeight = el.offsetHeight;
            var innerHeight = 0
            el.children.forEach((item) => {
                innerHeight += item.offsetHeight
            })
            if (innerHeight - (scrollTop + viewHeight) <= distance) {
                if (goOn) {
                    binding.value.call(_this)
                    goOn = false
                }
            }
        }, false)
    }
})

 

相关标签: vue培训