本篇文章是一篇Vue.js的教程，目標(biāo)在于用一種常見的業(yè)務(wù)場景——分頁/無限加載，幫助讀者更好的理解Vue.js中的一些設(shè)計思想。與許多Todo List類的入門教程相比，更全面的展示使用Vue.js完成一個需求的思考過程；與一些構(gòu)建大型應(yīng)用的高階教程相比，又更專注于一些零碎細(xì)節(jié)的實現(xiàn)，方便讀者快速掌握、致用。

需求分析

當(dāng)一個頁面中信息量過大時（例如一個新聞列表中有200條新聞需要展示），就會產(chǎn)生問題，例如：

》數(shù)據(jù)量過大，影響加載速度

》用戶體驗差，很難定位到之前自己看過的某篇文章

》擴(kuò)展性差，如果200條變?yōu)?000條或者更多

所以常見的解決思路就是至底時加載數(shù)據(jù)或者分頁展示。無限加載的實現(xiàn)過程類似于：

1.ajax類方法獲取數(shù)據(jù)

2.數(shù)據(jù)存入本地數(shù)組

3.數(shù)組中的每條數(shù)據(jù)對應(yīng)插入一個HTML模板片段中

4.將HTML片段append到節(jié)點中

前端分頁的實現(xiàn)過程類似于：

1.ajax類方法獲取數(shù)據(jù)

2.數(shù)據(jù)替換本地數(shù)組

3.數(shù)組中的每條數(shù)據(jù)對應(yīng)插入一個HTML模板片段中

4.清空節(jié)點后將HTML片段append到節(jié)點中

往往修改或者維護(hù)代碼時，我們會發(fā)現(xiàn)渲染HTML和插入部分是比較煩人的。因為我們需要將HTML拼接成字符串，在對應(yīng)的位置插入數(shù)據(jù)，往往就是一段非常長的字符串，之后想要加個class都費勁。es6的模板字符串讓這個情況有所好轉(zhuǎn)，但是依然有瑕疵（例如實際編寫時無法HTML代碼高亮）。同時我們還需要寫不少for或者forEach去循環(huán)數(shù)組，再命令式的append，如果這段代碼片段有一些復(fù)雜的交互，可能還需要通過事件代理綁定一堆方法。

如果在完成這類業(yè)務(wù)時，你也遇到過上述的問題，那么你就會發(fā)現(xiàn)Vue真是太coooooool了，let's vue!

新建一個Vue.js項目

強(qiáng)烈推薦使用vue-cli來新建一個項目。

一開始你可能會認(rèn)為用node.js和npm安裝一大堆庫，生成了一些你不太了解的目錄和配置文件，一寫代碼還會跳出一堆eslint的提示。但是這絕對物有所值，因為這樣的一個模板可以幫你更好的理解Vue.js組織文件的思路，并且當(dāng)你適應(yīng)之后，你會發(fā)現(xiàn)這些條條框框極大地加快了你的開發(fā)效率。

在這次的教程中，我們新建了一個名叫l(wèi)oadmore的項目，具體的新建項目流程可以參照官網(wǎng)教程的安裝一節(jié)。

布局頁面結(jié)構(gòu)

為了配合教程的逐步深入，我先從完成 加載更多 功能入手。為了和之后的分頁保持一致，我的頁面準(zhǔn)備由兩部分組成，一是信息列表，二是底部的一個加載更多的按鈕，我將他們都放在App.vue這個根組件中。

<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>

在這個過程中，我們根據(jù)Vue的設(shè)計思想有了如下思路：

1.在信息列表中，我們會完成我們上文中提到的幾個步驟，而這些步驟都只和信息列表本身有關(guān)，與Next按鈕間唯一的聯(lián)系就是Next點擊后需要觸發(fā)信息列表去獲取，而這可以通過props傳遞。所以我們把列表及其自身業(yè)務(wù)邏輯、樣式都放在List.vue這個組件中。

2.我們?yōu)榘粹o定義了一些基本的樣式，但是我們用的css選擇器就是一個.button類名，可能會和別的組件中的.button樣式?jīng)_突，所以我們加入了一個scoped屬性，讓App.vue中的style樣式只作用于這個組件內(nèi)部。

注意：scoped并不會影響css的作用優(yōu)先級，使用scoped不代表不會被外部樣式表覆蓋。

3.我們想引入一些基礎(chǔ)樣式，比如reset.css。如果在項目中使用了sass之類的語言，那么可以將對應(yīng)的外部sass文件放在assets文件夾中，通過import引入。普通的css可以直接寫在一個不加scoped屬性的組件中，但是如果你確定這個樣式表不會被頻繁改動，那么也可以作為第三方靜態(tài)資源引入index.html中。例如這個例子中，我在index.html中加入了：

<link rel="stylesheet" href="./static/reset.css">

效果：

完成List.vue

目前我們主要的業(yè)務(wù)邏輯都是圍繞信息列表展開的，也就是我們創(chuàng)建的List.vue。首先，我們需要獲取目標(biāo)數(shù)據(jù)，我選用了cnodejs.org社區(qū)的API作為例子進(jìn)行編寫。如果你也想用一個封裝好的ajax庫的話，應(yīng)該這么做：

引入第三方JS庫
將目標(biāo)JS庫文件放在static文件夾中，例如我選擇的是reqwest.js，然后在index.html先引入。

<script src="./static/reqwest.min.js"></script>

然后在build配置文件夾中，修改webpack.base.conf.js，export externals屬性：

externals: {
 'reqwest': 'reqwest'
}

這樣我們在我們的項目中，就可以隨時加載第三方庫了。

import reqwest from 'reqwest'

寫個API接口
在這個例子中，我們只需要調(diào)用文章列表這一個接口，但是實際項目中，可能你需要調(diào)用很多接口，而這些接口又會在多個組件中被用到。那么調(diào)用接口的邏輯四散在各個組件中肯定是不好的，想象一下對方的url發(fā)生了變化，你就得在無數(shù)個組件中一個個檢查是否要修改。

所以我在src文件夾中新建了一個api文件夾，用于存放各類API接口。當(dāng)前例子中，要獲取的是新聞列表，所以新建一個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。

編寫組件

我們用一個<ol>作為新聞列表，內(nèi)部的每一個<li>就是一條新聞，其中包括標(biāo)題、時間和作者3個信息。

在data中，我們用一個名為list的數(shù)組來儲存新聞列表的數(shù)據(jù)，一開始當(dāng)然是空的。我們再在data中設(shè)置一個名為limit的值，用來控制每頁加載多少條數(shù)據(jù)，作為參數(shù)傳給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來獲取數(shù)據(jù)，不過先想想我們會在哪幾個地方使用呢？首先，我們需要在組件開始渲染時自動獲取一次列表，填充基礎(chǔ)內(nèi)容。其次，我們在每次點擊APP.vue中的Next按鈕時也需要獲取新的列表。

所以我們在methods中定義一個get方法，成功獲取到數(shù)據(jù)后，就把獲取的數(shù)組拼接到當(dāng)前l(fā)ist數(shù)組后，從而實現(xiàn)了加載更多。

沿著這個思路，再想想get方法需要的參數(shù)，一個是包含了page和limit兩個屬性的對象，另一個是回調(diào)函數(shù)。回調(diào)函數(shù)我們已經(jīng)說過，只需要拼接數(shù)組即可，因此只剩下最后一個page參數(shù)還沒設(shè)置。

在初始化的時候，page的值應(yīng)該為1，默認(rèn)是第一頁內(nèi)容。之后page的值只由Next按鈕改變，所以我們讓page通過props獲取App.vue中傳來的page值。

最后則是補充get方法觸發(fā)的條件。一是在組件的生命周期函數(shù)created中調(diào)用this.get()獲取初始內(nèi)容，另一是在page值變化時對應(yīng)獲取，所以我們watch了page屬性，當(dāng)其變化時，調(diào)用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中的<list>修改為：

<list :page="page"></list>

再為page在App.vue中添加一個初始值以及對應(yīng)的方法next：

data () {
 return {
 page: 1
 }
},
methods: {
 next () {
 this.page++
 }
}

這樣我們就已經(jīng)完成了加載更多的功能。

改寫為分頁

因為之前我們的思路非常清晰，代碼結(jié)構(gòu)也很明了，所以改寫起來會非常簡單，只需要將List.vue中拼接數(shù)組改為賦值數(shù)組就可以了：

// 常規(guī)loadmore
// this.list = this.list.concat(list.data)
// 分頁
this.list = list.data

就這么簡單的一行就完成了功能的改變，這就是Vue.js中核心的數(shù)據(jù)驅(qū)動視圖的威力。當(dāng)然，接下來我們還要做點更cooooool的。

添加功能

因為分頁替換了原來的數(shù)組，所以僅僅一個Next按鈕不夠用了，我們還需要一個Previous按鈕返回上一頁。同樣的，也給Previous按鈕綁定一個previous方法，除了用this.page--改變page的值以外，還需要對this.page === 1的邊界條件進(jìn)行一個判斷。

同時為了方便知道我們當(dāng)前的頁數(shù)，在按鈕中，加入{{ page }}顯示頁數(shù)。

<a class="button" @click="next" >GO NEXT<span>CURRENT:{{page}}</span></a>

transition動畫
編寫和完善功能的過程中，已經(jīng)充分體現(xiàn)了Vue.js清晰和便利的一面，接下來繼續(xù)看看其它好用的功能，首先就是transition動畫。

為了展示transition的威力，首先我找到了一個模仿的對象：lavalamp.js（ Demo地址 ）。

在Demo中可以看到頁面以一種非常優(yōu)雅的動畫過渡完成了切換內(nèi)容的過程，其本身是用JQuery+CSS動畫完成的，我準(zhǔn)備用Vue.js進(jìn)行改寫。

首先學(xué)習(xí)了一下原作者的實現(xiàn)思路以后，發(fā)現(xiàn)是將一個div作為loader，position設(shè)定為fixed。當(dāng)翻頁時，根據(jù)點擊的按鈕不同，loader從頂部或者底部擴(kuò)展高度，達(dá)到100%。數(shù)據(jù)加載完畢后，再折疊高度，最終隱藏。

那么初步的思路如下：

1.添加一個loader，最小高度與按鈕一致，背景同為黑色，讓過渡顯得更自然。

2.loader高度需要達(dá)到一個屏幕的高度，所以設(shè)置html和body的height為100%。

3.需要有一個值，作為loader是否顯示的依據(jù)，我定為finish，其默認(rèn)值值為true，通過給loader添加v-show="!finish"來控制其顯示。

4.在next和previous方法中添加this.finish = false觸發(fā)loader的顯示。

5.在App.vue和List.vue建立一個雙向的props屬性綁定至finish，當(dāng)List.vue中的get方法執(zhí)行完畢后，通過props將App.vue中的finish設(shè)定為true，隱藏loader。

6.給loader添加一個transition。由于動畫分為頂部展開和底部展開兩種，所以使用動態(tài)的transition為其指定正確的transition名稱。

7.新增一個值up，用于判斷動畫從哪個方向開始，其默認(rèn)值為false。在previous方法中，執(zhí)行this.up = true，反之在next方法中，則執(zhí)行this.up = false。

根據(jù)思路，寫出的loader應(yīng)該是這樣的（style等樣式設(shè)定在最后統(tǒng)一展示）：

<div id="loader" v-show="!finish" :transition="up? 'up-start':'down-start'">
 <span>Loading</span>
</div>

可以看到我設(shè)定了up-start和down-start兩種transition方式，對應(yīng)的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);
 }
 }

設(shè)置了expand和collapse兩個animation，再在transition的各個生命周期鉤子中做對應(yīng)的綁定，就達(dá)到了和lavalamp.js相接近的效果。

為了保證動畫能執(zhí)行完整，在List.vue的get方法執(zhí)行完之后，還使用了一個setTimeout定時器讓finish延時0.5秒變?yōu)閠rue。

優(yōu)化體驗
動畫效果完成之后，實際使用時發(fā)現(xiàn)lavalamp.js還有個巧妙地設(shè)計，就是點擊Previous后，頁面前往底部，反之點擊Next后則前往頂部。

實現(xiàn)后者并不復(fù)雜，在next方法中加入以下一行代碼調(diào)整位置即可：

document.body.scrollTop = 0

previous前往底部則略微復(fù)雜一點，因為獲取到數(shù)據(jù)之后，頁面高度會發(fā)生改變，如果在previous中執(zhí)行scrollTop的改變，有可能會出現(xiàn)新的內(nèi)容填充后高度變長，頁面不到底的情況。所以我watch了finish的值，僅當(dāng)點擊按鈕為previous且finish變化為false至true時前往底部，代碼如下：

watch: {
 finish (val, oldVal) {
 if (!oldVal && val && this.up) {
 document.body.scrollTop = document.body.scrollHeight
 }
 }
}

前端路由
完成以上內(nèi)容之后，發(fā)現(xiàn)不論翻到第幾頁，一旦刷新，就會回到第一頁。vue-router就是為解決這類問題而生的。

首先我們引入VueRouter，方式可以參考上文中的“引入第三方JS庫”。然后在main.js對路由規(guī)則進(jìn)行一些配置。

我們的思路包括：

1.我們需要在url上反映出當(dāng)前所處的頁數(shù)。

2.url中的頁數(shù)應(yīng)該與所有組件中的page值保持一致。

3.點擊Next和Previous按鈕要跳轉(zhuǎn)到對應(yīng)的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的具名路徑。之后將所有目標(biāo)路徑為'/'，也就是初始頁的請求，重定向到'/page/1'上保證一致性。最后再在每次路由執(zhí)行之前做一個判斷，如果到了'/page/0'這樣的非法路徑上，就不執(zhí)行transition.next()。

根據(jù)之前的思路，在App.vue中，獲取路由對象的參數(shù)值，賦值給page。同時給兩個按鈕添加對應(yīng)的v-link。

本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論