广场 › 开发技术 › vue 无限滚动加载指令

POOPE 发表于 2021-7-5 20:41:45

vue 无限滚动加载指令

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 无限滚动加载指令