Question

我有很多对象，其中包含大量数据，这些数据将由Vue在DOM的组件中呈现，并且我猜想做到这一点的最佳方法是仅呈现将可见的HTML，因为例如，如果每个组件的高度为100像素，而组件容器的高度为1000像素，则一次只能渲染10个组件；直到用户向下或向上滚动，然后以一种FIFO方式（先进先出）呈现和“取消呈现”各个元素。

所以我想知道的是：哪种方法是最好的？，可以通过使用一个由10个对象组成的数组来解决，并在容器的高度上添加100px（将容器中的像素额外增加50px）底部和顶部），因此当用户在那个额外的空间中滚动时，可以执行fifo事情，可以给另一个组件一个解决方案，即在可见的情况下（在window对象的帮助下）提供计算能力，然后渲染自身（使用v-show指令）。我不知道。

（好吧，这个问题是指列表的动态呈现，而不是组件的动态负载，或者是动态组件）。

任何想法，方法论，标准或技术都将非常有用！

var app = new Vue({
  el: '#app',
  data: {
    users: Array(1000).fill({
      gender: "male",
      name: {
        title: "mr",
        first: "vincent",
        last: "ouellet"
      },
      location: {
        street: "6963 disputed rd",
        city: "brockton",
        state: "yukon",
        postcode: "Z4J 0J2",
        coordinates: {
        latitude: "-60.8550",
        longitude: "-36.0196"
      },
      timezone: {
        offset: "+3:30",
        description: "Tehran"
      }
      },
      email: "vincent.ouellet@example.com",
      login: {
        uuid: "eb9b61f7-fb0b-4731-9a1c-f4b2a7b3b6a9",
        username: "bigpeacock949",
        password: "nyjets",
        salt: "0TdUElhf",
        md5: "0fbc0edb70fda545f8838634f11f4be2",
        sha1: "f83e02d917721a1516b74937841b9c7f75a75d1e",
        sha256: "69e2c04bd4ccb43815b529a7182e1e59b9f788032b8197af54b9b6d3f907b8a3"
      },
      dob: {
        date: "1959-08-27T20:26:03Z",
        age: 59
      },
      registered: {
        date: "2013-10-20T04:51:58Z",
        age: 4
      },
      phone: "647-173-6604",
      cell: "544-306-1457",
      id: {
        name: "",
        value: null
      },
      picture: {
        large: "https://randomuser.me/api/portraits/men/13.jpg",
        medium: "https://randomuser.me/api/portraits/med/men/13.jpg",
        thumbnail: "https://randomuser.me/api/portraits/thumb/men/13.jpg"
      },
      nat: "CA"
      }
    )
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="app">
  <ul v-for="(user, i) in users">
    <li>
      <image :src="`https://randomuser.me/api/portraits/men/${i}.jpg`"/>
      <!-- IM THE REAL APLICATION THIS IS A VERY HEAVY UI -->
      <pre>{{user}}</pre>
    </li>
  </ul>
</div>

Answer 1

在您创建的方法上，您可以添加一个事件侦听器来查找文档的结尾。

window.onscroll = () => {
    let bottomOfWindow =
      document.documentElement.scrollTop + window.innerHeight ===
      document.documentElement.offsetHeight;

    if (bottomOfWindow) {
      axios.get(`https://randomuser.me/api/`).then(response => {
        this.persons.push(response.data.results[0]);
      });
    }
  };

获得响应后，您可以推送到要用于迭代的数组。但是，当您在移动设备上使用时，您需要监听触摸事件而不是滚动。

或者，我发现此插件https://peachscript.github.io/vue-infinite-loading/非常易于实现，并且可以处理移动事件和桌面事件。

如何进行无限滚动，在Vue js中动态呈现列表（仅可见）

1 个答案: