2

我正在尝试为无限滚动列表设置一个 IntersectionObserver。如果已到达列表的最后一项，我想检查 IntersectionObserver。

到目前为止，我的IntersectionObserver设置如下所示：

mounted() {
    const config = {
        treshold: 1
    };

    const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
            if (entry.intersectionRatio > 0) console.log(entry.target);
        });
    }, config);

    observer.observe(this.lastRenderedDeal());
}

我的列表项呈现如下：

<deal :deal="deal"
      :key="index"
      ref="deals"
      v-for="(deal, index) in deals"
</deal>

要获取最后一个renderDeal，我ref在交易中使用：

lastRenderedDeal() {
    const deals = this.$refs.deals;
    return deals ? deals[deals.length - 1].$el : null;
}

这适用于初始设置并触发。问题是当我想要无限滚动时，我需要继续附加到交易列表中。因此，我lastRenderedDeal不断更新以反映附加到我列表中的最后一笔交易。

这种反应并没有传递给observer.observe它看起来的方法。它只拾取我的初始元素。这似乎很明显，因为它已在mounted钩子中实例化，但我该如何处理呢？

我是否需要为交易设置观察者并再次调用observer.observe？如果是这样，我可以简单地告诉它替换最初观察到的项目吗？

4

1 回答 1

5

您可以观察到一个<div>始终位于列表底部的假人。您可能需要在 上设置 akey以<div>确保 Vue 在组件的每次渲染期间不会重新创建元素。

我总是喜欢制作一个通用且可重用的组件来捆绑这种行为。这是我的看法：

const InfiniteScroll = {
  render(h) {
    return h('div', [
      ...this.$slots.default,

      // A dummy div at the bottom of the list which we will observe.
      // We must set a key on this element so that Vue reuses
      // the same element it initially created upon each rerender.
      h('div', {
        key: 'footer',
        ref: 'footer',
        style: {
          height: '1px'
        },
      }),
    ]);
  },

  mounted() {
    this.observer = new IntersectionObserver(entries => {
      // We only have one entry. Is it visible?
      if (entries[0].intersectionRatio > 0) {
        this.$emit('trigger');
      }
    });

    // Observe the dummy footer element
    this.observer.observe(this.$refs.footer);
  },
};

new Vue({
  el: '#app',
  components: {
    InfiniteScroll,
  },
  data: {
    items: [],
  },
  created() {
    this.loadMore();
  },
  methods: {
    loadMore() {
      for (let i = 0; i < 20; i++) {
        this.items.push(this.items.length + 1);
      }
    },
  },
});
body {
  margin: 0;
}

.item {
  border-bottom: 1px solid #eee;
  padding: 10px;
}
<script src="https://rawgit.com/vuejs/vue/dev/dist/vue.js"></script>

<div id="app">
  <infinite-scroll @trigger="loadMore">
    <div v-for="item of items" class="item">{{ item }}</div>
  </infinite-scroll>
</div>

于 2017-12-21T11:02:03.523 回答