前言

已經有好久沒有更新博客了，大三下了要準備找實習了，才發現自己很多東西都不會，所以趕緊找了個現在流行的MVVM框架學習一下。我學習的是Vue，所以拿Vue寫了一個FullPage的模板，可以供自己和其他人使用。

項目的地址是：https://github.com/hzxszsk/vue-fullpage

項目講解

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

分解思路

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

其中，Page組件主要負責每個FullPage頁面的樣式和位置控制，而PageController組件則用來發起頁面的切換請求。

因為Vue是單向數據流形式的，因此將所有需要的數據都定義在App.vue文件中，由App組件向下傳遞數據。

數據需求分析

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

其中，總頁面數即是Page總數，有多少個Page，就有多少個Page的配置，因此可以通過計算Page配置信息對象的數量來獲得總頁面數。

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

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

PageController需要對頁面進行切換控制，因此需要兩個屬性：

編寫頁面樣式

App組件的結構為：

<div id="app" class="app"> <!-- page為單獨的頁面組件，page內可以編寫任意的頁面內容 --> <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組件結構為：

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