Vue.js implementiert die Entwicklung unendlicher Lade- und Paging-Funktionen
- 高洛峰Original
- 2016-12-08 09:31:592050Durchsuche
Dieser Artikel ist ein Vue.js-Tutorial. Ziel ist es, ein allgemeines Geschäftsszenario mit Paginierung/unendlichem Laden zu verwenden, um den Lesern zu helfen, einige Designideen in Vue.js besser zu verstehen. Im Vergleich zu vielen Einführungs-Tutorials zu Todo List wird der Denkprozess bei der Verwendung von Vue.js zur Erfüllung einer Anforderung umfassender veranschaulicht. Im Vergleich zu einigen fortgeschrittenen Tutorials zum Erstellen umfangreicher Anwendungen konzentriert es sich stärker auf die Implementierung einiger fragmentarischer Details. was für die Leser bequemer ist. Beherrschen Sie es schnell und nutzen Sie es.
Anforderungsanalyse
Wenn die Informationsmenge auf einer Seite zu groß ist (z. B. 200 Nachrichten in einer Nachrichtenliste, die angezeigt werden müssen), treten Probleme auf auftreten, wie zum Beispiel:
》Die Datenmenge ist zu groß, was sich auf die Ladegeschwindigkeit auswirkt
》Die Benutzererfahrung ist schlecht, es ist schwierig, einen Artikel zu finden, den ich zuvor gelesen habe
》Die Skalierbarkeit ist schlecht, wenn aus 200 Elementen 2000 oder mehr werden
Die gängige Lösung besteht also darin, die Daten am Ende zu laden oder auf Seiten anzuzeigen. Der Implementierungsprozess des unendlichen Ladens ähnelt:
1. Ajax-Klassenmethode zum Abrufen von Daten
2. Daten werden im lokalen Array gespeichert
3. Jedes Datenelement im Array wird entsprechend eingefügt In einem HTML-Vorlagenfragment
4. Hängen Sie das HTML-Fragment an den Knoten an
Der Implementierungsprozess des Front-End-Pagings ähnelt:
1. Ajax-Klassenmethode zum Abrufen von Daten
2. Ersetzen Sie das lokale Array durch Daten
3. Jedes Datenelement im Array wird in ein HTML-Vorlagenfragment eingefügt
4. Hängen Sie nach dem Löschen des Knotens das HTML-Fragment an den Knoten an
Beim Ändern oder Verwalten von Code stellen wir häufig fest, dass das Rendern von HTML und das Einfügen von Teilen ärgerlicher ist. Da wir HTML in eine Zeichenfolge zusammenfügen und Daten an der entsprechenden Position einfügen müssen, handelt es sich häufig um eine sehr lange Zeichenfolge, und es ist schwierig, später eine Klasse hinzuzufügen. Die Vorlagenzeichenfolge von es6 hat diese Situation verbessert, weist jedoch immer noch Mängel auf (z. B. kann HTML-Code beim eigentlichen Schreiben nicht hervorgehoben werden). Gleichzeitig müssen wir auch eine Menge for oder forEach schreiben, um das Array zu durchlaufen, und dann zwingend anhängen. Wenn dieser Codeausschnitt einige komplexe Interaktionen aufweist, müssen wir möglicherweise auch eine Reihe von Methoden über den Ereignis-Proxy binden.
Wenn Sie beim Abschluss dieser Art von Geschäft auf die oben genannten Probleme gestoßen sind, werden Sie feststellen, dass Vue so coooooool ist, lass uns vue!
Erstellen Sie ein neues Vue.js-Projekt
Es wird dringend empfohlen, vue-cli zum Erstellen eines neuen Projekts zu verwenden.
Zuerst denken Sie vielleicht, dass die Verwendung von node.js und npm zur Installation vieler Bibliotheken einige Verzeichnisse und Konfigurationsdateien generiert, über die Sie nicht viel wissen, und dass eine Reihe von Eslint-Eingabeaufforderungen angezeigt werden sobald Sie den Code schreiben. Aber es lohnt sich auf jeden Fall, denn eine solche Vorlage kann Ihnen helfen, die Ideen von Vue.js zum Organisieren von Dateien besser zu verstehen, und wenn Sie sie anpassen, werden Sie feststellen, dass diese Regeln und Vorschriften Ihre Entwicklungseffizienz erheblich beschleunigen.
In diesem Tutorial haben wir ein neues Projekt namens „loadmore“ erstellt. Informationen zum spezifischen neuen Projektprozess finden Sie im Installationsabschnitt des offiziellen Website-Tutorials.
Layout-Seitenstruktur
Um bei der schrittweisen Vertiefung des Tutorials mitzuwirken, werde ich zunächst die Funktion „Mehr laden“ ausfüllen. Um mit dem nachfolgenden Paging konsistent zu sein, besteht meine Seite aus zwei Teilen, dem einen aus der Informationsliste und dem anderen aus der Schaltfläche „Mehr laden“ unten. Beide Teile habe ich in die Stammkomponente von App.vue eingefügt .
<template>
<div id="app">
<list></list>
<a class="button" @click="next" >GO NEXT</a>
</div>
</template>
<script>
import List from './components/List'
export default {
components: {
List
},
data () {
return {
...
}
},
methods: {
next () {
...
}
}
}
</script>
<style scoped>
.button {
display: block;
width: 100%;
background: #212121;
color: #fff;
font-weight: bold;
text-align: center;
padding: 1em;
cursor: pointer;
text-decoration: none;
}
.button span {
margin-left: 2em;
font-size: .5rem;
color: #d6d6d6;
}
</style>
In diesem Prozess haben wir die folgenden Ideen basierend auf Vues Designideen:
1. In der Informationsliste haben wir führt die oben genannten Schritte aus, und diese Schritte beziehen sich nur auf die Informationsliste selbst. Der einzige Zusammenhang mit der Schaltfläche „Weiter“ besteht darin, dass nach dem Klicken auf „Weiter“ die Informationsliste zum Abrufen aktiviert werden muss und diese durchlaufen werden kann Requisiten. Also haben wir die Liste und ihre eigene Geschäftslogik und ihren eigenen Stil in die List.vue-Komponente eingefügt.
2. Wir haben einige grundlegende Stile für Schaltflächen definiert, aber der von uns verwendete CSS-Selektor ist ein .button-Klassenname, der mit dem .button-Stil in anderen Komponenten in Konflikt geraten kann, daher haben wir ein Attribut mit Gültigkeitsbereich hinzugefügt, das dies zulässt Der Stil in App.vue soll nur innerhalb dieser Komponente angewendet werden.
Hinweis: Scoped hat keinen Einfluss auf die Priorität von CSS. Die Verwendung von Scoped bedeutet nicht, dass es nicht von externen Stylesheets überschrieben wird.
3. Wir möchten einige grundlegende Stile vorstellen, wie zum Beispiel reset.css. Wenn im Projekt eine Sprache wie Sass verwendet wird, kann die entsprechende externe Sass-Datei im Assets-Ordner abgelegt und durch Import eingeführt werden. Gewöhnliches CSS kann ohne Gültigkeitsbereichsattribute direkt in eine Komponente geschrieben werden. Wenn Sie jedoch sicher sind, dass dieses Stylesheet nicht häufig geändert wird, können Sie es auch als statische Ressource eines Drittanbieters in index.html einführen. In diesem Beispiel habe ich beispielsweise Folgendes hinzugefügt:
Effekt:
Complete List.vue
Derzeit konzentriert sich unsere Hauptgeschäftslogik auf Informationslisten. Das ist das List.vue, das wir haben erstellt. Zuerst müssen wir die Zieldaten abrufen. Als Beispiel zum Schreiben habe ich die API der cnodejs.org-Community ausgewählt. Wenn Sie auch eine gekapselte Ajax-Bibliothek verwenden möchten, sollten Sie Folgendes tun:
Eine JS-Bibliothek eines Drittanbieters einführen
Legen Sie die Ziel-JS-Bibliotheksdatei in den statischen Ordner, zum Beispiel habe ich reqwest gewählt. js und führen Sie es dann zuerst in index.html ein.
然后在build配置文件夹中，修改webpack.base.conf.js，export externals属性：
externals: {
'reqwest': 'reqwest'
}
这样我们在我们的项目中，就可以随时加载第三方库了。
import reqwest from 'reqwest'写个API接口
在这个例子中，我们只需要调用文章列表这一个接口，但是实际项目中，可能你需要调用很多接口，而这些接口又会在多个组件中被用到。那么调用接口的逻辑四散在各个组件中肯定是不好的，想象一下对方的url发生了变化，你就得在无数个组件中一个个检查是否要修改。
所以我在src文件夹中新建了一个api文件夹，用于存放各类API接口。当前例子中，要获取的是新闻列表，所以新建一个news.js文件：
import reqwest from 'reqwest'
const domain = 'https://cnodejs.org/api/v1/topics'
export default {
getList (data, callback) {
reqwest({
url: domain,
data: data
})
.then(val => callback(null, val))
.catch(e => callback(e))
}
}
这样我们就拥有了一个获取新闻列表的API：getList。
编写组件
我们用一个
- 作为新闻列表，内部的每一个
- 就是一条新闻，其中包括标题、时间和作者3个信息。
在data中，我们用一个名为list的数组来储存新闻列表的数据，一开始当然是空的。我们再在data中设置一个名为limit的值，用来控制每页加载多少条数据，作为参数传给getList这个API。
因此我们的template部分是这样的（加入了一些style美化样式）：
<template> <ol> <li v-for="news of list"> <p class="title">{{ news.title }}</p> <p class="date">{{ news.create_at }}</p> <p class="author">By: {{ news.author.loginname }}</p> </li> </ol> </template> <style scoped> ol { margin-left: 2rem; list-style: outside decimal; } li { line-height: 1.5; padding: 1rem; border-bottom: 1px solid #b6b6b6; } .title { font-weight: bold; font-size: 1.3rem; } .date { font-size: .8rem; color: #d6d6d6; } </style>之后我们显然需要使用getList来获取数据，不过先想想我们会在哪几个地方使用呢？首先，我们需要在组件开始渲染时自动获取一次列表，填充基础内容。其次，我们在每次点击APP.vue中的Next按钮时也需要获取新的列表。
所以我们在methods中定义一个get方法，成功获取到数据后，就把获取的数组拼接到当前list数组后，从而实现了加载更多。
沿着这个思路，再想想get方法需要的参数，一个是包含了page和limit两个属性的对象，另一个是回调函数。回调函数我们已经说过，只需要拼接数组即可，因此只剩下最后一个page参数还没设置。
在初始化的时候，page的值应该为1，默认是第一页内容。之后page的值只由Next按钮改变，所以我们让page通过props获取App.vue中传来的page值。
最后则是补充get方法触发的条件。一是在组件的生命周期函数created中调用this.get()获取初始内容，另一是在page值变化时对应获取，所以我们watch了page属性，当其变化时，调用this.get()。
最后List.vue的script长这样：
<script> import news from '../api/news' export default { data () { return { list: [], limit: 10 } }, props: { page: { type: Number, default: 1 } }, created () { this.get() }, watch: { page (val) { this.get() } }, methods: { get () { news.getList({ page: this.page, limit: this.limit }, (err, list) => { if (err) { console.log(err) } else { list.data.forEach((data) => { const d = new Date(data.create_at) data.create_at = `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}` }) this.list = this.list.concat(list.data) } }) } } } </script>同时我们将App.vue中的
- 修改为：
再为page在App.vue中添加一个初始值以及对应的方法next：
data () { return { page: 1 } }, methods: { next () { this.page++ } }这样我们就已经完成了加载更多的功能。
改写为分页
因为之前我们的思路非常清晰，代码结构也很明了，所以改写起来会非常简单，只需要将List.vue中拼接数组改为赋值数组就可以了：
// 常规loadmore // this.list = this.list.concat(list.data) // 分页 this.list = list.data
就这么简单的一行就完成了功能的改变，这就是Vue.js中核心的数据驱动视图的威力。当然，接下来我们还要做点更cooooool的。
添加功能
因为分页替换了原来的数组，所以仅仅一个Next按钮不够用了，我们还需要一个Previous按钮返回上一页。同样的，也给Previous按钮绑定一个previous方法，除了用this.page--改变page的值以外，还需要对this.page === 1的边界条件进行一个判断。
同时为了方便知道我们当前的页数，在按钮中，加入{{ page }}显示页数。
transition动画
编写和完善功能的过程中，已经充分体现了Vue.js清晰和便利的一面，接下来继续看看其它好用的功能，首先就是transition动画。为了展示transition的威力，首先我找到了一个模仿的对象：lavalamp.js（ Demo地址 ）。
在Demo中可以看到页面以一种非常优雅的动画过渡完成了切换内容的过程，其本身是用JQuery+CSS动画完成的，我准备用Vue.js进行改写。
首先学习了一下原作者的实现思路以后，发现是将一个div作为loader，position设定为fixed。当翻页时，根据点击的按钮不同，loader从顶部或者底部扩展高度，达到100%。数据加载完毕后，再折叠高度，最终隐藏。
那么初步的思路如下：
1.添加一个loader，最小高度与按钮一致，背景同为黑色，让过渡显得更自然。
2.loader高度需要达到一个屏幕的高度，所以设置html和body的height为100%。
3.需要有一个值，作为loader是否显示的依据，我定为finish，其默认值值为true，通过给loader添加v-show="!finish"来控制其显示。
4.在next和previous方法中添加this.finish = false触发loader的显示。
5.在App.vue和List.vue建立一个双向的props属性绑定至finish，当List.vue中的get方法执行完毕后，通过props将App.vue中的finish设定为true，隐藏loader。
6.给loader添加一个transition。由于动画分为顶部展开和底部展开两种，所以使用动态的transition为其指定正确的transition名称。
7.新增一个值up，用于判断动画从哪个方向开始，其默认值为false。在previous方法中，执行this.up = true，反之在next方法中，则执行this.up = false。
根据思路，写出的loader应该是这样的（style等样式设定在最后统一展示）：
<div id="loader" v-show="!finish" :transition="up? 'up-start':'down-start'"> <span>Loading</span> </div>
可以看到我设定了up-start和down-start两种transition方式，对应的css动画代码如下：
.down-start-transition { bottom: 0; height: 100%; } .down-start-enter { animation: expand .5s 1 cubic-bezier(0, 1, 0, 1) both; } .down-start-leave { animation: collapse .5s 1 cubic-bezier(0, 1, 0, 1) both; top: 0; bottom: auto; } .up-start-transition { top: 0; height: 100%; } .up-start-enter { animation: expand .5s 1 cubic-bezier(0, 1, 0, 1) both; } .up-start-leave { animation: collapse .5s 1 cubic-bezier(0, 1, 0, 1) both; top: auto; bottom: 0; } @keyframes expand { 0% { height: 3em; transform: translate3d(0, 0, 0); } 100% { height: 100%; transform: translate3d(0, 0, 0); } } @keyframes collapse { 0% { height: 100%; transform: translate3d(0, 0, 0); } 100% { height: 3em; transform: translate3d(0, 0, 0); } }设置了expand和collapse两个animation，再在transition的各个生命周期钩子中做对应的绑定，就达到了和lavalamp.js相接近的效果。
为了保证动画能执行完整，在List.vue的get方法执行完之后，还使用了一个setTimeout定时器让finish延时0.5秒变为true。
优化体验
动画效果完成之后，实际使用时发现lavalamp.js还有个巧妙地设计，就是点击Previous后，页面前往底部，反之点击Next后则前往顶部。实现后者并不复杂，在next方法中加入以下一行代码调整位置即可：
document.body.scrollTop = 0
previous前往底部则略微复杂一点，因为获取到数据之后，页面高度会发生改变，如果在previous中执行scrollTop的改变，有可能会出现新的内容填充后高度变长，页面不到底的情况。所以我watch了finish的值，仅当点击按钮为previous且finish变化为false至true时前往底部，代码如下：
watch: { finish (val, oldVal) { if (!oldVal && val && this.up) { document.body.scrollTop = document.body.scrollHeight } } }前端路由
完成以上内容之后，发现不论翻到第几页，一旦刷新，就会回到第一页。vue-router就是为解决这类问题而生的。首先我们引入VueRouter，方式可以参考上文中的“引入第三方JS库”。然后在main.js对路由规则进行一些配置。
我们的思路包括：
1.我们需要在url上反映出当前所处的页数。
2.url中的页数应该与所有组件中的page值保持一致。
3.点击Next和Previous按钮要跳转到对应的url去。
4.在这个例子中我们没有router-view。
因此main.js的配置如下：
import Vue from 'vue' import App from './App' import VueRouter from 'VueRouter' Vue.use(VueRouter) const router = new VueRouter() router.map({ '/page/:pageNum': { name: 'page', component: {} } }) router.redirect({ '/': '/page/1' }) router.beforeEach((transition) => { if (transition.to.path !== '/page/0') { transition.next() } else { transition.abort() } }) router.start(App, 'app')首先定义了一个名为page的具名路径。之后将所有目标路径为'/'，也就是初始页的请求，重定向到'/page/1'上保证一致性。最后再在每次路由执行之前做一个判断，如果到了'/page/0'这样的非法路径上，就不执行transition.next()。
根据之前的思路，在App.vue中，获取路由对象的参数值，赋值给page。同时给两个按钮添加对应的v-link。