Bagaimana untuk membina susun atur tatal dan aliran air terjun tanpa had menggunakan Vue?

Vue.js ialah rangka kerja JavaScript popular yang membolehkan pembangun membuat aplikasi web yang dinamik dan responsif dengan mudah. Antaranya, ia amat digemari oleh pembangun kerana keupayaan pembangunan komponennya yang berkuasa. Tatal tak terhingga dan susun atur air terjun telah menjadi salah satu ciri yang sangat diperlukan dalam pembangunan web moden.

Artikel ini bertujuan untuk memperkenalkan cara menggunakan Vue.js, digabungkan dengan beberapa perpustakaan pihak ketiga, untuk melaksanakan fungsi tatal tak terhingga dan susun atur air terjun.

Mencapai Tatal Tak Terhingga

Tatal Tak Terhingga merujuk kepada terus memuatkan lebih banyak kandungan apabila menatal ke bahagian bawah halaman, mencapai pengembangan kandungan halaman yang tidak terhingga. Teknik ini berfungsi untuk beribu-ribu entri data dan boleh meningkatkan pengalaman pengguna dengan banyak.

Penyediaan sumber data

Mula-mula kita perlu menyediakan sumber data yang mengandungi sekurang-kurangnya beberapa item data. Di sini kami menggunakan contoh mudah untuk menggambarkan, dengan mengandaikan kami mempunyai senarai tatal tanpa had yang mengandungi 100 item data, sumber data boleh seperti ini:

[
  {id: 1, text: 'Item 1'},
  {id: 2, text: 'Item 2'},
  // ... more data
  {id: 99, text: 'Item 99'},
  {id: 100, text: 'Item 100'},
]

Pasang dan gunakan perpustakaan tatal vue-infinite

Seterusnya, kami perlu Pasang perpustakaan yang dipanggil vue-infinite-scroll, yang menyediakan mekanisme teras kefungsian tatal tak terhingga, serta arahan dan komponen yang diperlukan. Untuk memasang perpustakaan ini, anda boleh menggunakan arahan npm:

npm install vue-infinite-scroll

Daftar secara global arahan yang diperlukan:

import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)

Dalam komponen kami, kami perlu menetapkan beberapa konfigurasi dan data:

<template>
  <div class="scroll-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item.text }}</li>
    </ul>
    <div v-if="busy" class="loading">
      Loading ...
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      items: [], // 当前列表所有数据
      busy: false, // 标记是否正在请求数据
      page: 1, // 当前数据分页
      perPage: 10, // 每页数量
      total: 100, // 总数据量
    }
  },
  methods: {
    loadMore() {
      // 标记正在加载数据
      this.busy = true
      // 模拟请求延迟
      setTimeout(() => {
        // 构造新数据
        const newItems = []
        const from = (this.page - 1) * this.perPage + 1
        const to = this.page * this.perPage
        for (let i = from; i <= to && i <= this.total; i++) {
          newItems.push({
            id: i,
            text: 'Item ' + i
          })
        }
        // 加载新数据
        this.items = [...this.items, ...newItems]
        // 增加当前页数
        this.page++
        // 去除加载数据标记
        this.busy = false
      }, 1000)
    }
  }
}
</script>

Penerangan kod

• v- infinite -scroll="loadMore": digunakan untuk menentukan fungsi panggil balik untuk memuatkan lebih banyak datav-infinite-scroll="loadMore"：用于指定加载更多数据的回调函数
• infinite-scroll-disabled="busy"：用于指定当前是否正在请求数据
• infinite-scroll-distance="10"
infinite-scroll-disabled="busy": digunakan untuk menentukan sama ada data sedang diminta

infinite-scroll-distance="10": digunakan untuk mencetuskan gelagat data pemuatan apabila menentukan bilangan piksel bar skrol dari bawah

melaksanakan reka letak aliran air terjun

Air terjun ialah Reka Letak biasa, konsep terasnya ialah: item dengan saiz yang berbeza boleh muncul dalam baris yang sama, dan susun atur aliran air terjun secara automatik melaraskan dengan bilangan item. Kita boleh menggunakan perpustakaan komponen pihak ketiga Vue yang dipanggil vue-waterfall untuk melaksanakan reka letak air terjun dengan mudah dengan hanya beberapa baris kod.

Pasang dan gunakan perpustakaan vue-waterfall

Pertama, kita perlu memasang perpustakaan komponen vue-waterfall:

npm install vue-waterfall

Daftar komponen secara global:

import waterfall from 'vue-waterfall'
Vue.use(waterfall)

Kemudian kita boleh menggunakan susun atur aliran air terjun dalam komponen:

<template>
  <waterfall>
    <div v-for="(item, index) in items" :key="index">
      <h3>{{item.title}}</h3>
      <p>{{item.desc}}</p>
      <img :src="item.imgUrl" :alt="item.title">
    </div>
  </waterfall>
</template>
<script>
import axios from 'axios'

export default {
  data () {
    return {
      items: []
    }
  },
  created () {
    axios.get('https://api.example.com/items').then(response => {
      this.items = response.data
    })
  }
}
</script>

Perihalan kod

Kod ini menggunakan pustaka axios untuk mendapatkan data daripada sumber data Struktur data adalah kira-kira seperti berikut:

[
  {
    title: 'Item 1',
    desc: 'This is item 1',
    imgUrl: 'https://example.com/item1.png',
  },
  {
    title: 'Item 2',
    desc: 'This is item 2',
    imgUrl: 'https://example.com/item2.png',
  },
  // ...
]

Optimumkan susun atur tatal tak terhingga dan aliran air terjun

Malah, dalam senario aplikasi sebenar, tak terhingga. tatal dan air terjun diproses Masalah biasa yang dihadapi semasa melakukan susun atur aliran: apabila sumber data sangat besar, prestasi komponen akan menurun secara mendadak, menyebabkan tindak balas menjadi perlahan atau tersekat. Di sini kami memperkenalkan beberapa strategi pengoptimuman untuk meningkatkan prestasi komponen.

Gunakan teknologi tatal maya

Idea asas teknologi tatal maya adalah untuk hanya memaparkan data yang dilihat oleh pengguna mengikut selang paparan, dan bukannya memaparkan semua data. Dengan cara ini kita boleh mengurangkan kos pemaparan komponen dengan banyak, sekali gus meningkatkan prestasi. Komponen vue-virtual-scroll-list ialah perpustakaan yang boleh dipercayai untuk melaksanakan penatalan maya, yang boleh digunakan bersama dengan perpustakaan vue-infinite-scroll atau vue-waterfall.

Pasang perpustakaan vue-virtual-scroll-list:

npm install vue-virtual-scroll-list

Apabila menggunakan perpustakaan ini, anda perlu membuat pengubahsuaian berikut dalam komponen:

<template>
  <virtual-scroll-list :size="75" :remain="10" :items="items" :key-field="'id'">
    <div slot-scope="{item}">
      <h3>{{item.title}}</h3>
      <p>{{item.desc}}</p>
      <img :src="item.imgUrl" :alt="item.title">
    </div>
  </virtual-scroll-list>
</template>
<script>
import axios from 'axios'
import VirtualScrollList from 'vue-virtual-scroll-list'

export default {
  components: { VirtualScrollList },
  data () {
    return {
      items: []
    }
  },
  created () {
    axios.get('https://api.example.com/items').then(response => {
      this.items = response.data
    })
  }
}
</script>

Antaranya, kami menggantikan komponen vue-waterfall dengan vue-virtual komponen -scroll-list , untuk mencapai kesan tatal maya.

Pemuatan Berpisah

Satu lagi cara untuk mengurangkan tekanan pemaparan komponen ialah memuatkan data dalam bahagian. Kaedah ini serupa dengan tatal tak terhingga yang dinyatakan sebelum ini, tetapi bukannya menarik semua data sekaligus semasa memuatkan data, ia memuatkan data tersegmen atas permintaan. Bagaimana untuk melaksanakan pemuatan bersegmen? Penyelesaian mudah ialah memuatkan hanya N keping data pertama pada satu masa, dan kemudian memuatkan sekeping data seterusnya selepas pengguna menatal ke bawah. Kaedah ini sesuai untuk situasi di mana jumlah data agak besar.

<template>
  <div class="scroll-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item.text }}</li>
    </ul>
    <div v-if="busy" class="loading">
      Loading ...
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      items: [], // 当前列表所有数据
      busy: false, // 标记是否正在请求数据
      page: 1, // 当前数据分页
      perPage: 10, // 每页数量
      total: 100, // 总数据量
    }
  },
  methods: {
    loadMore() {
      // 标记正在加载数据
      this.busy = true
      // 模拟请求延迟
      setTimeout(() => {
        // 构造新数据
        const newItems = []
        const from = (this.page - 1) * this.perPage + 1
        const to = this.page * this.perPage
        for (let i = from; i <= to && i <= this.total; i++) {
          newItems.push({
            id: i,
            text: 'Item ' + i
          })
        }
        // 加载新数据
        if (this.page <= 10) {
          this.items = [...this.items, ...newItems]
          // 增加当前页数
          this.page++
        } else {
          this.busy = true
        }
        // 去除加载数据标记
        this.busy = false
      }, 1000)
    }
  }
}
</script>

Dalam kod ini, kami telah mengubah suai fungsi loadMore. Ia kini hanya akan menarik 10 halaman pertama data. Dengan cara ini, walaupun terdapat banyak data, beban pada komponen dapat dikurangkan dengan memuatkan secara beransur-ansur.

Ringkasan🎜🎜Dalam artikel ini, kami memperkenalkan cara menggunakan Vue.js untuk mencipta fungsi susun atur tatal dan air terjun tanpa had, dan juga melaksanakan beberapa langkah pengoptimuman untuk meningkatkan prestasi komponen. Secara umumnya, tiga perpustakaan vue-infinite-scroll, vue-waterfall dan vue-virtual-scroll-list sudah mencukupi untuk menyelesaikan kerja kami, tetapi dalam pembangunan sebenar, kami juga perlu mempertimbangkan pelbagai senario dan struktur data yang berbeza , untuk memilih penyelesaian yang paling sesuai dengan projek semasa anda. 🎜

Atas ialah kandungan terperinci Bagaimana untuk membina susun atur tatal dan aliran air terjun tanpa had menggunakan Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!