vue-observe-visibility - 一次对每个页面进行 api 调用答案

【问题标题】：vue-observe-visibility - makes api call to every page all at oncevue-observe-visibility - 一次对每个页面进行 api 调用
【发布时间】：2021-05-28 19:45:47
【问题描述】：

我正在使用 vue 并且已经安装了 npm 包vue-observe-visibility。我目前已将v-observe-visibility="visibilityChanged" 放入选择列表<option>；

在visibilityChanged 方法中我有这个

visibilityChanged (isVisible) {
      if (!isVisible) {return}
      this.isVisible = isVisible
      this.page++;

      this.$emit('getMoreData', this.page)
    },

因此页面递增并发出一个事件，该事件调用 getMoreData() 方法并以每页 15 的增量返回分页数据。

方法

getMoreData (page) {
      if(page > this.lastPage) {return}
      axios.get(`${this.userDataUrl}?page=${page}`).then(response => {
        this.items.push(...response.data.data);
        this.lastPage = response.data.last_page;
      });
    },

HTML

  <div>
    <select onfocus='this.size=10;' onblur='this.size=1;' onchange='this.size=1; this.blur();'> //to make select have scrollable feature
      <option
          v-if="items.length" v-observe-visibility="visibilityChanged"
          v-for="item in items"
          value="item.id"
          :key="item.id"
      >
        <slot name="item" v-bind:item="item" />
      </option>
    </select>
  </div>

问题是，只要我打开下拉列表，就会为每个页面调用 getMoreData 方法，因此在打开选择列表后会导致刷新。我在我的“网络”选项卡中看到它会立即调用 ?page=2,3,4 等...如何让这仅在向下滚动到下一页时才调用下一页？

【问题讨论】：

标签： vue.js intersection-observer

【解决方案1】：

将v-observe-visibility="visibilityChanged" 移动到位于页面上项目下方的对象 (<div>) 上，而不是每个项目上。每个项目始终可见，因此它会触发每个页面的加载。另外，我不确定在选择中使用它是最好的用例。

【讨论】：