Vue - 到达页面底部时无限滚动不会获取新数据

Question

所以，我创建了一个方法 fetchStories，可以从我的 API 中以 10 个为一批获取故事，一旦您滚动到屏幕底部，就可以获取新故事。这是我的 Vue 实例的一部分：

var discoveryFeed = new Vue({ // eslint-disable-line no-unused-vars
  el: '#discoveryFeed',
  data: {
    userId: userId,
    username: username,
    tags: [],
    selectedTag: null,
    stories: [],
    checklist: [],
    limit: 10,
    page: 1,
    isEnd: false,
    busy: false,
    isFollowing: true
  },
  beforeMount: function() {
    var self = this;
    self.$http.get('/api/tags')
      .then(function(res) {
        self.tags = res.body;
      }, function(err) {
        self.tags = [];
      });
    self.$http.get('/api/user/' + self.username + '/checklist')
      .then(function(res) {
        self.checklist = res.body || [];
      }, function(err) {
        self.checklist = [];
      });
    self.fetchStories();
  },
  methods: {
    fetchStories: function(isNew) {
      var self = this;
      isNew = Boolean(isNew);
      if(self.isEnd) { return; }

      self.busy = true;
      var url = '/api/discover';
      if(self.selectedTag) {
        url = `/api/tags/${self.selectedTag.code}/stories`;
      }
      url += '?p=' + self.page;
      url += '&l=' + self.limit;
      self.page += 1;
      self.$http.get(url)
        .then(function(res) {
          self.busy = false;
          if(res.body.length === 0) {
            self.isEnd = true;
            return;
          }
          if(isNew) {
            self.stories = [];
          }
          self.stories = self.stories.concat(res.body);
        }, function(err) {
          self.busy = false;
          self.stories = [];
        });
    },
    setTag: function(tag) {
      var self = this;
      self.selectedTag = tag;
      for(var i = 0; i < self.tags.length; i++) {
        self.tags[i].selected = false;
      }
      self.selectedTag.selected = true;
      self.page = 1;
      self.fetchStories(true);
    }

在我的哈巴狗中，我使用 v-infinite-scroll 指令来调用方法 fetchStories。另请注意，我正在使用标签列表，单击新标签将通过方法 setTag(tag).

加载不同的故事集

nav.col-lg-3.col-md-4.d-none.d-md-block.d-lg-block.bg-sidebar(v-cloak)
  .feed-sidebar.feed-sidebar-interests.border-top-0.border-bottom-0.border-left-0.position-sticky
    strong Your Interests
    div.list-group.list-unstyled.mt-2(v-if="tags.length > 0")
      a.tag-btn.mb-2.align-middle.text-black(v-for="tag, index in tags" v-bind:class="{ active: selectedTag && selectedTag.id === tag.id }" @click="setTag(tag); scrollToTop();")
        i.fa-fw.mr-2(v-bind:class="tag.icon + ' fa-lg'"
          v-bind:style="'color:' + tag.hexColor")
        span {{ tag.name }}

.col-lg-6.col-md-8(v-cloak
    v-infinite-scroll="fetchStories"
    infinite-scroll-disabled="busy"
    infinite-scroll-distance="50")

在初始加载时检查数据响应后，在 /stories?p=1&l=10 处获取了十个故事。但是，到达底部后，/stories?p=2&l=10 的数据响应数组为空。这可能与我在选择标签时使用布尔值设置标志有关。

Answer 1

显然，我应该在设置新标签时重置 isEnd 的值。

setTag: function(tag) {
  var self = this;
  self.selectedTag = tag;
  for(var i = 0; i < self.tags.length; i++) {
    self.tags[i].selected = false;
  }
  self.selectedTag.selected = true;
  self.page = 1;
  self.isEnd = false;
  self.fetchStories(true);
}

Vue - 到达页面底部时无限滚动不会获取新数据

Vue - infinite scroll doesn't fetch new data when bottom of the page is reached

javascript

infinite-scroll

pug

vuejs2