Bagaimana untuk melaksanakan senarai tatal tak terhingga dengan Vue?

Dalam aplikasi web, senarai tatal ialah cara yang sangat biasa untuk memaparkan data, manakala senarai tatal tak terhingga ialah cara untuk memuatkan lebih banyak data secara dinamik. Tidak sukar untuk melaksanakan senarai tatal tak terhingga dalam Vue Dengan beberapa operasi mudah, kami boleh melaksanakan senarai tatal tak terhingga dengan mudah.

1. Sediakan data

Pertama, kita perlu menyediakan data untuk dipaparkan. Secara amnya, data ini diperoleh melalui antara muka. Dalam contoh ini, kita boleh menggunakan sumber data palsu untuk mensimulasikan mendapatkan data:

const data = [
  { id: 1, content: '第1条数据' },
  { id: 2, content: '第2条数据' },
  { id: 3, content: '第3条数据' },
  { id: 4, content: '第4条数据' },
  { id: 5, content: '第5条数据' },
  { id: 6, content: '第6条数据' },
  { id: 7, content: '第7条数据' },
  { id: 8, content: '第8条数据' },
  { id: 9, content: '第9条数据' },
  { id: 10, content: '第10条数据' }
];

2. Untuk mencapai penatalan tanpa had

Seterusnya, kita perlu menggunakan arahan Vue v-infinite-scroll untuk Melaksanakan infinite menatal. Pertama, dalam templat kami, kami memerlukan bekas untuk memaparkan data dan tetapkan arahan kepada bekas ini, seperti yang ditunjukkan di bawah: v-infinite-scroll 来实现无限滚动。首先，在我们的模板中，需要有一个容器来展示数据，并且给这个容器设置一个指令，如下所示：

<div class="list" v-infinite-scroll="loadMore">
  <div v-for="item in items" :key="item.id" class="item">{{ item.content }}</div>
</div>

在这里，我们通过 v-infinite-scroll 指令来触发对应的方法 loadMore，这个方法将根据当前展示的数据来动态加载更多数据。另外，在这个容器中，我们使用了 v-for 指令来遍历整个数据列表，并将其展示到页面上。

接下来，我们需要实现 loadMore 方法。在这个方法中，首先获取当前数据列表中最后一条数据的下标 lastIndex，然后使用一些异步操作来动态加载更多的数据，并将这些数据添加到当前的数据列表中。

methods: {
  loadMore() {
    const lastIndex = this.items.length - 1;
    const lastItem = this.items[lastIndex];
    const nextIndex = lastItem.id + 1;

    setTimeout(() => {
      const newData = data
        .slice(nextIndex - 1, nextIndex + 9)
        .map(item => {
          return {
            id: item.id,
            content: item.content
          };
        });

      this.items = [...this.items, ...newData];
    }, 1000);
  }
}

在这里，我们通过 setTimeout 来模拟异步加载数据的操作。首先，获取当前数据列表中最后一条数据的下标 lastIndex，并将其作为加载更多数据的起始点。然后，通过 slice 方法来截取数据源中的一段数据，并通过 map 方法来将其转换为当前应用使用的数据格式。最后，将这些新数据添加到当前的数据列表中。

需要注意的是，我们在加载数据时并没有一次性加载全部数据，而是通过 slice

<template>
  <div class="list" v-infinite-scroll="loadMore">
    <div v-for="item in items" :key="item.id" class="item">{{ item.content }}</div>
  </div>
</template>

<script>
const data = [
  { id: 1, content: '第1条数据' },
  { id: 2, content: '第2条数据' },
  { id: 3, content: '第3条数据' },
  { id: 4, content: '第4条数据' },
  { id: 5, content: '第5条数据' },
  { id: 6, content: '第6条数据' },
  { id: 7, content: '第7条数据' },
  { id: 8, content: '第8条数据' },
  { id: 9, content: '第9条数据' },
  { id: 10, content: '第10条数据' }
];

export default {
  data() {
    return {
      items: data.slice(0, 10).map(item => {
        return {
          id: item.id,
          content: item.content
        };
      })
    };
  },

  methods: {
    loadMore() {
      const lastIndex = this.items.length - 1;
      const lastItem = this.items[lastIndex];
      const nextIndex = lastItem.id + 1;

      setTimeout(() => {
        const newData = data
          .slice(nextIndex - 1, nextIndex + 9)
          .map(item => {
            return {
              id: item.id,
              content: item.content
            };
          });

        this.items = [...this.items, ...newData];
      }, 1000);
    }
  }
};

Di sini, kami menggunakan arahan v-infinite-scroll untuk Mencetuskan kaedah yang sepadan loadMore Kaedah ini akan memuatkan lebih banyak data secara dinamik berdasarkan data yang dipaparkan pada masa ini. Selain itu, dalam bekas ini, kami menggunakan arahan v-for untuk merentasi keseluruhan senarai data dan memaparkannya pada halaman.

3. Seterusnya, kita perlu melaksanakan kaedah loadMore. Dalam kaedah ini, mula-mula dapatkan subskrip lastIndex data terakhir dalam senarai data semasa, kemudian gunakan beberapa operasi tak segerak untuk memuatkan lebih banyak data secara dinamik dan menambah data ini pada senarai data semasa .
rrreee

Di sini, kami menggunakan setTimeout untuk mensimulasikan pemuatan data tak segerak. Mula-mula, dapatkan indeks lastIndex bagi sekeping data terakhir dalam senarai data semasa dan gunakannya sebagai titik permulaan untuk memuatkan lebih banyak data. Kemudian, gunakan kaedah slice untuk memintas sekeping data daripada sumber data dan gunakan kaedah map untuk menukarnya kepada format data yang digunakan oleh aplikasi semasa. Akhir sekali, tambahkan data baharu ini pada senarai data semasa.

Perlu diingat bahawa semasa memuatkan data, kami tidak memuatkan semua data sekaligus, tetapi hanya memuatkan sepuluh keping data berikutnya setiap kali melalui kaedah slice. Kelebihan ini ialah ia dapat meningkatkan prestasi aplikasi dan mengelakkan memuatkan sejumlah besar data pada satu masa daripada menyebabkan beban yang berlebihan pada aplikasi.

🎜Kod lengkap🎜🎜🎜Berikut ialah kod contoh lengkap, termasuk penyediaan data, templat dan pelaksanaan kaedah. 🎜rrreee🎜Dalam contoh ini, kami menggunakan sumber data palsu untuk mensimulasikan operasi mendapatkan data. Dalam aplikasi praktikal, kami perlu menggunakan sumber data kami sendiri dan kemudian memuatkan lebih banyak data secara dinamik melalui operasi tak segerak. Dengan operasi yang begitu mudah, kami boleh melaksanakan senarai tatal tak terhingga berdasarkan Vue. 🎜

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan senarai tatal tak terhingga dengan Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!