0

我正在尝试使用 vue-InfiniteLoading 组件实现无限加载。每次滚动时我都会得到一个数组，当我获取数据时我尝试将数组中的内容推送到另一个数组。当我使用推送时，我在屏幕上看到新元素，但没有图像和信息..

我尝试了 push、concat 和 foreach，它们都不适合我。response.data.data.data 是包含新元素的数组，dorms 是 UI 上显示的主数组。

我也试过 push (...response.data.data.data)

    .get(`/site/cities/dorms/istanbul?page=${self.page}`)
    .then(response => {
      if (response.data.data.data) {
        this.page += 1;
        // var myArray = self.dorms;
        // self.dorms = myArray .concat(response.data.data.data);
        // self.dorms.push(response.data.data.data[1]);
        /*             response.data.data.data.forEach(item => {
          self.dorms.push(item);
        }); */
        self.dorms.push(...response.data.data.data);

        //self.dorms = response.data.data.data;
        self.popupDorms = response.data.data.popups;
        $state.loaded();
      } else {
        $state.complete();
      }
    });

我希望数组中的所有信息都被推送，但它不起作用。

4

2 回答 2

0

我们可以编写一个小函数来检查滚动位置并触发 ajax 调用以获取更多数据，或者只是从 JSON 对象中获取下一个数据槽并将其绑定到 HTML。如下所示：

$(window).scroll(function() {
    if($(window).scrollTop() == $(document).height() - $(window).height()) {
           // ajax call or some other logic to show data here
    }
});

或者您可以使用其中一个可用的插件，我自己使用“Waypoint”来完成相同的事情之一。

于 2019-05-28T14:17:10.783 回答
0

你可以这样做：

self.dorms = [...self.dorms, ...response.data.data.data]

或者

self.dorms = [].concat(self.dorms, response.data.data.data)

或者

self.dorms.push(...response.data.data.data)

所有结果都相同。您的错误应该在其他地方。

于 2019-05-28T14:17:37.207 回答