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.
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.
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'},
]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>v-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 bawahnpm install vue-waterfall
import waterfall from 'vue-waterfall' Vue.use(waterfall)
<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>[
{
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',
},
// ...
]npm install vue-virtual-scroll-list
<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><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>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!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
