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

Posted 2023-02-22

【中文标题】如何进行无限滚动，在Vue js中动态渲染列表（仅可见）

【英文标题】：How to make a infinite scroll, dynamically render a list in Vue js (only visible)

【发布时间】：2019-03-24 20:48:12

【问题描述】：

我有一个非常大的对象数组，其中包含大量数据要由 Vue 在组件中渲染到 DOM，我想最好的方法是只渲染将要可见的 html，因为例如，如果每个组件的 100px 高度和组件容器的 1000px 高度一次只渲染 10 个组件；直到用户向下或向上滚动，并以一种 FIFO 方式（先进先出）渲染和“取消渲染”相应的元素。

所以我想知道的是：这是最好的方法吗？，可以通过使用一个包含 10 个对象的数组来解决，并将 100px 添加到容器的高度（在容器中放置额外 50px 的容器）底部和顶部），所以当用户在那个额外的空间滚动时做先进先出的事情，另一个解决方案可以是给每个组件计算能力（在窗口对象的一点帮助下）如果是可见的，然后渲染自己（用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: "[e-mail]",
      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>

【问题讨论】：

请在 sn-p 中提供您当前的代码。

@DiegoMeza 有时一个虚拟数据可以帮助我们测试代码...

我会选择您正在谈论的延迟加载滚动（在您滚动到底部附近时加载项目），您可以添加一个引用并在用户在视口中有引用时收听。关于新数据的加载，我会在 v-for 中使用一个计算列表，您可以通过用户在数组中的位置的临时索引触发该列表（数量增加了列表中加载的 x 个项目）

@DiegoMeza 对不起，我不明白你写了什么。你能更清楚地编辑评论吗？ :)

很多例子：123456

【参考方案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/ 很容易实现，它可以处理移动和桌面事件。