Question

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

我尝试了push，concat和foreach，但没有一个对我有用。 response.data.data.data是包含新元素的数组，而dorms是UI上显示的主要数组。

我也尝试过推送（... 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();
      }
    });

我希望阵列中的所有信息都被推送，但是不起作用。

Answer 1

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

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

或者您可以使用一个可用的插件，我自己使用“ Waypoint”做同样的事情之一。

Answer 2

您可以这样做：

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

或

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

或

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

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

Vue无限加载的Javascript数组问题

2 个答案: