vue melaksanakan senarai menatal ke atas dan ke bawah

Sebagai pembangun bahagian hadapan, kami selalunya perlu menatal ke atas dan ke bawah senarai, tetapi jika kami menggunakan bar skrol asli, pengalaman pengguna selalunya tidak sesuai. Oleh itu, artikel ini akan memperkenalkan cara menggunakan Vue.js untuk mencapai kesan tatal atas dan bawah senarai untuk meningkatkan pengalaman pengguna.

Idea Pelaksanaan

Idea teras untuk melaksanakan penatalan pekeliling ke atas dan ke bawah adalah untuk menambah sejumlah data berulang antara permulaan dan penghujung senarai, supaya apabila pengguna menatal ke bahagian atas atau bawah senarai, kami akan Biarkan skrol sebenarnya bermula dengan data pendua di hujung yang lain. Dengan cara ini, kesan tatal bulat atas dan bawah boleh dicapai.

Walau bagaimanapun, jika data pendua ditambah terus ke sumber data asal, data asal tidak akan dipaparkan seperti biasa. Oleh itu, kita perlu mencapai ini dengan bantuan sifat yang dikira untuk mengekalkan integriti data asal.

Proses pelaksanaan

Proses melaksanakan penatalan pekeliling atas dan bawah dalam Vue.js boleh dibahagikan kepada langkah berikut:

1. Tambah bekas luaran pada list

Untuk mencapai kesan tatal, kita perlu menambah elemen bekas dan meletakkan senarai di dalamnya terlebih dahulu. Pada masa yang sama, kita juga perlu menetapkan sifat ketinggian dan limpahan bekas supaya pengguna boleh menatal senarai.

<div class="list-container"
     style="height: 400px;
            overflow: auto;">
  <ul class="list">
    <li v-for="(item, index) in displayList"
        :key="item.id">
      {{ item.text }}
    </li>
  </ul>
</div>

2. Tentukan sumber data dan sifat yang dikira

Seterusnya, kita perlu menentukan sumber data dan sifat yang dikira Di sini kita menggunakan tatasusunan list sebagai data sumber, dengan displayList ialah harta yang dikira. Dalam atribut yang dikira, kami akan mengklon sumber data melalui kaedah cloneList, menyambung sumber data yang diklon hujung ke hujung dan menambah data pendua.

data() {
  return {
    list: [
      { id: 1, text: 'item 1' },
      { id: 2, text: 'item 2' },
      ...
      { id: 20, text: 'item 20' }
    ]
  }
},
computed: {
  displayList() {
    const cloneList = [...this.list, ...this.list, ...this.list];
    const top = this.scrollTop % this.itemHeight;
    const startIndex = Math.floor(this.scrollTop / this.itemHeight) % this.list.length;
    const endIndex = startIndex + Math.ceil(this.listHeight / this.itemHeight);

    return cloneList.slice(startIndex, endIndex + 1);
  }
},

3. Ikatan tatal acara

Untuk mengemas kini kandungan paparan senarai mengikut tindakan tatal pengguna, kita perlu mendengar acara scroll bekas senarai dan hitung jarak tatal, kemas kini sifat terkira displayList.

mounted() {
  const listContainer = document.querySelector('.list-container');
  listContainer.addEventListener('scroll', this.handleScroll);
},
methods: {
  handleScroll() {
    const listContainer = document.querySelector('.list-container');
    this.scrollTop = listContainer.scrollTop;
  }
},

4. Kira sifat berkaitan tatal

Dalam sifat yang dikira, kita perlu mengira sifat seperti kedudukan bar skrol dan ketinggian item senarai, dan letakkannya dalam displayList Dikira semula semasa kemas kini. Dalam contoh ini, kami menggunakan this.scrollTop untuk menyimpan jarak tatal semasa bekas, gunakan this.itemHeight untuk menyimpan ketinggian setiap item senarai dan menggunakan this.listHeight untuk menyimpan ketinggian keseluruhan senarai.

data() {
  return {
    ...
    scrollTop: 0,
    itemHeight: 30,
    listHeight: this.list.length * this.itemHeight
  }
},
computed: {
  ...
  displayList() {
    ...
    this.listHeight = this.list.length * this.itemHeight;
    return cloneList.slice(startIndex, endIndex + 1);
  }
},

Ringkasan

Melalui langkah di atas, kita boleh mencapai tatal atas dan bawah senarai berdasarkan Vue.js. Apabila pengguna menatal ke bahagian atas atau bawah senarai, kami menjadikan skrol itu sebenarnya bermula dari data berulang di hujung yang lain, sekali gus mencapai kesan menatal ke atas dan ke bawah. Selain itu, kami menggunakan sifat terkira untuk mengekalkan integriti data asal, dan mencapai kesan tatal semula jadi dan lancar dengan mengikat peristiwa tatal dan mengira sifat berkaitan tatal.

Atas ialah kandungan terperinci vue melaksanakan senarai menatal ke atas dan ke bawah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!