4

我如何将额外的参数传递给 IntersectionObserver？我正在尝试为 Vue 创建一个延迟加载插件。它像这样工作得很好，但我也希望能够调用提供的指令函数。

const lazyload = {
    install(Vue) {
        const observer = new IntersectionObserver((entries) => {
            entries.forEach((entry) => {
                if (entry.intersectionRatio > 0) {
                    console.log('In viewport');
                }
            });
        });

        Vue.directive('lazy', {
            inserted(element) {
                observer.observe(element);
            }
        });
    }
};

这意味着在插入的函数中，我将设置binding为第二个参数。

inserted(element, binding)

我将如何传递这个绑定，以便我可以在我的 IntersectionObserver 回调中使用它？

最后它应该看起来像这样：

<div class="col-sm-6" v-lazy="fire">
4

2 回答 2

0

您可以使用以下命令访问指令的参数binding.value：

// html
<div v-lazy="0.5"></div>

// script
Vue.directive('lazy', {
  inserted(el, binding) {
    console.log(binding.value) // 0.5
  }
})

IntersectionObserver为每个指令用法创建一个新的可能是有意义的。例如，您可能希望一个div具有与另一个不同的滚动阈值div。在inserted回调中，我将使用指令参数中指定的选项创建观察者：

const makeObserver = options => new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    console.log({entry, ratio: options.threshold})
    if (entry.intersectionRatio >= options.threshold) {
      console.log('In viewport', {entry, ratio: options.threshold});
    }
  });
}, options);

Vue.directive('lazy', {
  inserted(el, binding) {
    const options = binding.value || {}
    const observer = makeObserver(options)
    observer.observe(el)
  }
})

然后，您可以使用该指令创建多个div具有不同参数的 s IntersectionObserver：

<div style="height: 100px; background: gray" v-lazy="{root: null, threshold: 0.1}"></div>
<div style="height: 200px; background: lightgray" v-lazy="{root: null, threshold: 1}"></div>

演示

于 2018-01-16T11:33:38.703 回答
0

如果您确实想将值作为额外参数传递，您可以使用Function.bind，但您必须为每个指令调用创建一个单独的 IntersectionObserver。

我会在这里推荐一个 WeakMap，并让回调检查地图是否有正确的处理程序。就像是：

const lazyload = {
  install(Vue) {
    const handlers = new WeakMap();
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          console.log('In viewport');
          handlers.get(entry.target)();
        }
      });
    });

    Vue.directive('lazy', {
      inserted(element, binding) {
        handlers.set(element, binding.value);
        observer.observe(element);
      }
    });
  }
};

（我没有使用过 Vue，所以我不确定这会逐字使用）

顺便说一句，我entry.intersectionRatio > 0改为entry.isIntersecting. 这可能是一个错误，但我在 Chrome 65 中看到，当滚动非常缓慢时，您可以获得entry.intersectionRatio === 0 && entry.isIntersecting === true：https ://jsfiddle.net/3jgm0ch7/2/

于 2018-03-18T21:11:10.787 回答