前言

已經(jīng)有好久沒有更新博客了，大三下了要準(zhǔn)備找實(shí)習(xí)了，才發(fā)現(xiàn)自己很多東西都不會(huì)，所以趕緊找了個(gè)現(xiàn)在流行的MVVM框架學(xué)習(xí)一下。我學(xué)習(xí)的是Vue，所以拿Vue寫了一個(gè)FullPage的模板，可以供自己和其他人使用。

項(xiàng)目的地址是：https://github.com/hzxszsk/vue-fullpage

項(xiàng)目講解

為了加深理解，我把我制作這個(gè)FullPage頁面的思路和流程記錄下來，也可以給其他和我一樣的初學(xué)者一個(gè)參考。

分解思路

首先，我根據(jù)Vue的組件開發(fā)思想，把這個(gè)FullPage頁面分為兩個(gè)主要的組件模塊：頁面組件（Page）和頁面控制組件（PageController）。除了這兩個(gè)組件模塊之外，還有一個(gè)整合的App.vue文件。

其中，Page組件主要負(fù)責(zé)每個(gè)FullPage頁面的樣式和位置控制，而PageController組件則用來發(fā)起頁面的切換請(qǐng)求。

因?yàn)閂ue是單向數(shù)據(jù)流形式的，因此將所有需要的數(shù)據(jù)都定義在App.vue文件中，由App組件向下傳遞數(shù)據(jù)。

數(shù)據(jù)需求分析

要制作一個(gè)FullPage頁面，每個(gè)Page頁面需要的是頁面自身的內(nèi)容（頁面的內(nèi)容和樣式配置），而控制器所需要的數(shù)據(jù)有當(dāng)前正在顯示的頁面以及總的頁面數(shù)，用這兩個(gè)屬性計(jì)算出其他需要的屬性。

其中，總頁面數(shù)即是Page總數(shù)，有多少個(gè)Page，就有多少個(gè)Page的配置，因此可以通過計(jì)算Page配置信息對(duì)象的數(shù)量來獲得總頁面數(shù)。

我在App.vue的組件data中定義了兩個(gè)屬性：

• currentPage表示的是當(dāng)前頁面的序號(hào)（從1開始計(jì)算）；
• options是一個(gè)數(shù)組，其中的每一個(gè)對(duì)象表示的是對(duì)應(yīng)序號(hào)的頁面的配置信息，可以通過修改里面的對(duì)象屬性從而改變對(duì)應(yīng)Page的樣式。

Page組件只需要知道當(dāng)前頁面是第幾個(gè)頁面和自身的配置，因此只含有兩個(gè)屬性：

• currentPage
• option 表示自身的配置

PageController需要對(duì)頁面進(jìn)行切換控制，因此需要兩個(gè)屬性：

• currentPage
• pageNum 表示總的頁面數(shù)量

編寫頁面樣式

App組件的結(jié)構(gòu)為：

<div id="app" class="app">
 <!-- page為單獨(dú)的頁面組件，page內(nèi)可以編寫任意的頁面內(nèi)容 -->
 <page :currentPage="currentPage"></page>
 <!-- page-controller為控制器組件 -->
 <page-controller :pageNum="pageNum" :currentPage="currentPage" @changePage="changePage" :arrowsType="arrowsType"></page-controller>
</div>

App組件主要樣式：

/* 頁面寬高為100%，overflow為hidden隱藏溢出部分 */
html,body {
 margin: 0;
 padding: 0;
 height: 100%;
 width: 100%;
 overflow: hidden;
}
.app {
 height: 100%;
 width: 100%;
}

Page組件結(jié)構(gòu)為：

<section class="page" v-if="options"
:style="{background:options.background,color:options.color||'#fff'}" 
:class="{'page-before': options.index < currentPage,'page-after': options.index > currentPage}">
  <div :class="{'page-center': options.isCenter}">
    <slot></slot>
  </div>
</section>
<section class="page" v-else>頁面正在渲染中。。。</section>

其中slot內(nèi)為在App.vue的page標(biāo)簽內(nèi)編寫的html內(nèi)容，并且根據(jù)Page組件內(nèi)的option屬性，為Page頁面添加不同的樣式（包括背景顏色、字體顏色、居中等，而且可以自由擴(kuò)展）

Page組件的主要樣式為：

.page {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: all 0.5s ease 0s;
}
.page-before {
  transform: translate3d(0,-100%,0);
}
.page-after {
  transform: translate3d(0,100%,0);
}

通過比較當(dāng)前頁面的index與currentPage的大小，可以判斷Page組件處于之前的頁面，當(dāng)前的頁面和之后的頁面三個(gè)狀態(tài)中的哪一種。

將所有頁面都用absolute定位在同一個(gè)位置上，對(duì)于處于之前的頁面的Page，添加page-before類標(biāo)簽，使其在Y軸上向上偏移自身高度距離，同理，對(duì)之后的頁面做Y軸上向下的自身高度偏移。

在page標(biāo)簽上添加transition樣式，使其在切換時(shí)可以產(chǎn)生動(dòng)畫效果。

PageController組件的結(jié)構(gòu)為：

<nav class="controller">
 <button v-if="arrowsType != 'no'" class="prev-btn" :class="{moving:arrowsType === 'animate'}" @click="changePage(prevIndex)"></button>
 <ul>
   <li @click="changePage(index)" v-for="index in pageNum" :key="'controller-'+index" class="controller-item"></li>
 </ul>
 <button v-if="arrowsType != 'no'" class="next-btn" :class="{moving:arrowsType === 'animate'}" @click="changePage(nextIndex)"></button>
</nav>

PageController組件中分為兩塊，控制上下滾動(dòng)的上下箭頭按鈕和控制所有頁面的ul列表。

因?yàn)镻ageController中的樣式較多，因此不在文章中詳細(xì)說明，只做簡單介紹。

button和ul標(biāo)簽用fixed定位，使其處于整個(gè)頁面的上方、下方和右側(cè)。

button使用rotate和border屬性，制作出箭頭的樣式，并添加對(duì)應(yīng)的動(dòng)畫效果（可以通過傳遞props選擇關(guān)閉）。

編寫頁面邏輯

切換頁面邏輯

因?yàn)樗械捻撁媲袚Q都是由PageController發(fā)起，而控制currentPage的組件并不是PageController，所以需要有一個(gè)父子組件事件，由子組件PageController發(fā)起，傳遞一個(gè)參數(shù)表示要切換到第幾個(gè)頁面，因此在PageController中定義一個(gè)method：

changePage (index) {
 this.$emit('changePage', index);
}

父組件接受該事件并調(diào)用自己定義的changePage方法，修改自身的currentPage屬性

changePage (index) {
 // 改變page
 this.currentPage = index;
}

箭頭按鈕上下滾動(dòng)

為了實(shí)現(xiàn)上下滾動(dòng)，需要知道當(dāng)前頁面的前一個(gè)頁面和后一個(gè)頁面分別是第幾個(gè)頁面，因此可以使用計(jì)算屬性，計(jì)算出前一個(gè)和后一個(gè)頁面的index值：

// PageController.vue
nextIndex () {
 if (this.currentPage === this.pageNum) {
 return 1;
 } else {
 return this.currentPage + 1;
 }
},
prevIndex () {
 if (this.currentPage === 1) {
 return this.pageNum;
 } else {
 return this.currentPage - 1;
 }
}

在點(diǎn)擊箭頭時(shí)，將對(duì)應(yīng)的nextIndex或prevIndex值當(dāng)做參數(shù)傳給changePage方法。

滾輪滾動(dòng)和移動(dòng)端滾動(dòng)

滾輪滾動(dòng)和移動(dòng)端滾動(dòng)主要依靠window的監(jiān)聽事件，根據(jù)傳入的event屬性，計(jì)算出頁面是應(yīng)該向上還是向下滾動(dòng)，將需要滾動(dòng)的方向作為參數(shù)傳遞給處理函數(shù)handler。

因?yàn)榇a略長，因此不全部顯示在文章中，只顯示處理函數(shù)相關(guān)邏輯

let _this = this;
let timer = null;
function scrollHandler (direction) {
 // 防止重復(fù)觸發(fā)滾動(dòng)事件
 if (timer != null) {
 return;
 }
 if (direction === 'down') {
 _this.changePage(_this.nextIndex);
 } else {
 _this.changePage(_this.prevIndex);
 }
 timer = setTimeout(function() {
 clearTimeout(timer);
 timer = null;
 }, 500);
}

需要注意的一點(diǎn)是，移動(dòng)端做滾動(dòng)判斷時(shí)，要求touches和changedTouches之間需要一定的間隔，不然容易誤觸發(fā)滾動(dòng)事件。

OPTIONS屬性的分發(fā)

為了使使用者更加方便地編寫頁面內(nèi)容而不在意具體的頁面序號(hào)，我采用了自動(dòng)對(duì)page內(nèi)的option賦值的方法。其實(shí)現(xiàn)原理是在App.vue文件中，使用鉤子函數(shù)mounted，對(duì)page中的option屬性進(jìn)行設(shè)置。

mounted () {
 this.$children.forEach((child, index) => {
 // 動(dòng)態(tài)設(shè)置各個(gè)page內(nèi)的options
 if (child.option === null) {
  let childOption = this.options[index];
  this.$set(childOption,'index',index+1);
  child.option = childOption;
 }
 });
}

高級(jí)屬性：新的鉤子函數(shù)

為了滿足部分使用者的需求，我在設(shè)置了兩個(gè)鉤子函數(shù)：beforeLeave和afterEnter。

這兩個(gè)鉤子函數(shù)可以設(shè)置在對(duì)應(yīng)頁面的options屬性對(duì)象中，并且含有一個(gè)默認(rèn)的參數(shù)，為對(duì)應(yīng)頁面的page組件實(shí)例對(duì)象。

其實(shí)現(xiàn)方式為在原先的changePage函數(shù)（App.vue）內(nèi)添加新的邏輯：

changePage (index) {
 // beforeLeave
 let beforeIndex = this.currentPage - 1;
 let leaveFunction = this.options[beforeIndex].beforeLeave;
 typeof leaveFunction === 'function' && leaveFunction.call(this,this.$children[beforeIndex]);
 // 改變page
 this.currentPage = index;
 // afterEnter
 let nextIndex = index-1;
 let enterFunction = this.options[nextIndex].afterEnter;
 this.$nextTick(function () {
 typeof enterFunction === 'function' && enterFunction.call(this,this.$children[nextIndex]);
 })
}

總結(jié)

這篇文章記錄了我開發(fā)一個(gè)FullPage頁面的總體流程，將主要的邏輯重新順理了一遍，還有一些小的細(xì)節(jié)沒有寫在文章中，有興趣的可以去具體的項(xiàng)目頁面看源碼

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

最新評(píng)論