Vue.js ist ein beliebtes JavaScript-Framework, mit dem Entwickler auf einfache Weise dynamische, reaktionsfähige Webanwendungen erstellen können. Unter ihnen wird es von Entwicklern besonders wegen seiner leistungsstarken Komponentenentwicklungsfähigkeiten bevorzugt. Unendliches Scrollen und Wasserfall-Layout sind zu einem unverzichtbaren Merkmal der modernen Webentwicklung geworden.
Dieser Artikel soll vorstellen, wie man Vue.js in Kombination mit einigen Bibliotheken von Drittanbietern verwendet, um unendliche Scroll- und Wasserfall-Layout-Funktionen zu implementieren.
Unendliches Scrollen bezieht sich darauf, beim Scrollen zum Ende der Seite weiterhin mehr Inhalte zu laden und so eine unendliche Erweiterung des Seiteninhalts zu erreichen. Diese Technik funktioniert für Tausende von Dateneinträgen und kann das Benutzererlebnis erheblich verbessern.
Zuerst müssen wir eine Datenquelle vorbereiten, die zumindest einige Datenelemente enthält. Hier verwenden wir ein einfaches Beispiel zur Veranschaulichung. Angenommen, wir haben eine Liste mit unendlich scrollbaren Datenelementen, die 100 Datenelemente enthält. Die Datenquelle kann wie folgt aussehen:
[
{id: 1, text: 'Item 1'},
{id: 2, text: 'Item 2'},
// ... more data
{id: 99, text: 'Item 99'},
{id: 100, text: 'Item 100'},
]npm install vue-infinite-scroll
Registrieren Sie die erforderlichen Anweisungen global:
import infiniteScroll from 'vue-infinite-scroll' Vue.use(infiniteScroll)
In unserer Komponente müssen wir einige Konfigurationen und Daten festlegen:
<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>Codebeschreibung
v- infinite -scroll="loadMore": wird verwendet, um die Rückruffunktion anzugeben, um mehr Daten zu ladeninfinite-scroll-disabled="busy": wird verwendet, um anzugeben, ob derzeit Daten angefordert werden v-infinite-scroll="loadMore"：用于指定加载更多数据的回调函数infinite-scroll-disabled="busy"：用于指定当前是否正在请求数据infinite-scroll-distance="10"infinite-scroll-distance="10": wird verwendet, um das Ladedatenverhalten auszulösen, wenn angegeben wird, wie viele Pixel die Bildlaufleiste von unten entfernt ist. npm 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>Dieser Code verwendet die Axios-Bibliothek, um Daten aus einer Datenquelle abzurufen. Die Struktur der Daten ist ungefähr wie folgt:
[
{
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>Das obige ist der detaillierte Inhalt vonWie erstelle ich mit Vue ein unendliches Scroll- und Wasserfall-Flow-Layout?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Die übergeordnete Vue-Komponente ruft die Methode der untergeordneten Komponente auf
vue v-wenn
Der Unterschied zwischen vue2.0 und 3.0
So übergeben Sie einen Wert an die Vue-Komponente
Der Unterschied zwischen vue3.0 und 2.0
Vue allgemeine Anweisungen
Was sind die am häufigsten verwendeten Anweisungen in Vue?
Der Unterschied zwischen mpvue und vue
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
