使用vue制作FullPage頁面滾動效果
前言
已經有好久沒有更新博客了，大三下了要準備找實習了，才發(fā)現自己很多東西都不會，所以趕緊找了個現在流行的MVVM框架學習一下。我學習的是Vue，所以拿Vue寫了一個FullPage的模板，可以供自己和其他人使用。
項目的地址是：https://github.com/hzxszsk/vue-fullpage
項目講解
為了加深理解，我把我制作這個FullPage頁面的思路和流程記錄下來，也可以給其他和我一樣的初學者一個參考。
分解思路
首先，我根據Vue的組件開發(fā)思想，把這個FullPage頁面分為兩個主要的組件模塊：頁面組件（Page）和頁面控制組件（PageController）。除了這兩個組件模塊之外，還有一個整合的App.vue文件。
其中，Page組件主要負責每個FullPage頁面的樣式和位置控制，而PageController組件則用來發(fā)起頁面的切換請求。
因為Vue是單向數據流形式的，因此將所有需要的數據都定義在App.vue文件中，由App組件向下傳遞數據。
數據需求分析
要制作一個FullPage頁面，每個Page頁面需要的是頁面自身的內容（頁面的內容和樣式配置），而控制器所需要的數據有當前正在顯示的頁面以及總的頁面數，用這兩個屬性計算出其他需要的屬性。
其中，總頁面數即是Page總數，有多少個Page，就有多少個Page的配置，因此可以通過計算Page配置信息對象的數量來獲得總頁面數。
我在App.vue的組件data中定義了兩個屬性：
- currentPage表示的是當前頁面的序號（從1開始計算）；
- options是一個數組，其中的每一個對象表示的是對應序號的頁面的配置信息，可以通過修改里面的對象屬性從而改變對應Page的樣式。
Page組件只需要知道當前頁面是第幾個頁面和自身的配置，因此只含有兩個屬性：
- currentPage
- option 表示自身的配置
PageController需要對頁面進行切換控制，因此需要兩個屬性：
- currentPage
- pageNum 表示總的頁面數量
編寫頁面樣式
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>
其中slot內為在App.vue的page標簽內編寫的html內容，并且根據Page組件內的option屬性，為Page頁面添加不同的樣式（包括背景顏色、字體顏色、居中等，而且可以自由擴展）
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);
}
通過比較當前頁面的index與currentPage的大小，可以判斷Page組件處于之前的頁面，當前的頁面和之后的頁面三個狀態(tài)中的哪一種。
將所有頁面都用absolute定位在同一個位置上，對于處于之前的頁面的Page，添加page-before類標簽，使其在Y軸上向上偏移自身高度距離，同理，對之后的頁面做Y軸上向下的自身高度偏移。
在page標簽上添加transition樣式，使其在切換時可以產生動畫效果。
PageController組件的結構為：
<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組件中分為兩塊，控制上下滾動的上下箭頭按鈕和控制所有頁面的ul列表。
因為PageController中的樣式較多，因此不在文章中詳細說明，只做簡單介紹。
button和ul標簽用fixed定位，使其處于整個頁面的上方、下方和右側。
button使用rotate和border屬性，制作出箭頭的樣式，并添加對應的動畫效果（可以通過傳遞props選擇關閉）。
編寫頁面邏輯
切換頁面邏輯
因為所有的頁面切換都是由PageController發(fā)起，而控制currentPage的組件并不是PageController，所以需要有一個父子組件事件，由子組件PageController發(fā)起，傳遞一個參數表示要切換到第幾個頁面，因此在PageController中定義一個method：
changePage (index) {
this.$emit('changePage', index);
}
父組件接受該事件并調用自己定義的changePage方法，修改自身的currentPage屬性
changePage (index) {
// 改變page
this.currentPage = index;
}
箭頭按鈕上下滾動
為了實現上下滾動，需要知道當前頁面的前一個頁面和后一個頁面分別是第幾個頁面，因此可以使用計算屬性，計算出前一個和后一個頁面的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;
}
}
在點擊箭頭時，將對應的nextIndex或prevIndex值當做參數傳給changePage方法。
滾輪滾動和移動端滾動
滾輪滾動和移動端滾動主要依靠window的監(jiān)聽事件，根據傳入的event屬性，計算出頁面是應該向上還是向下滾動，將需要滾動的方向作為參數傳遞給處理函數handler。
因為代碼略長，因此不全部顯示在文章中，只顯示處理函數相關邏輯
let _this = this;
let timer = null;
function scrollHandler (direction) {
// 防止重復觸發(fā)滾動事件
if (timer != null) {
return;
}
if (direction === 'down') {
_this.changePage(_this.nextIndex);
} else {
_this.changePage(_this.prevIndex);
}
timer = setTimeout(function() {
clearTimeout(timer);
timer = null;
}, 500);
}
需要注意的一點是，移動端做滾動判斷時，要求touches和changedTouches之間需要一定的間隔，不然容易誤觸發(fā)滾動事件。
OPTIONS屬性的分發(fā)
為了使使用者更加方便地編寫頁面內容而不在意具體的頁面序號，我采用了自動對page內的option賦值的方法。其實現原理是在App.vue文件中，使用鉤子函數mounted，對page中的option屬性進行設置。
mounted () {
this.$children.forEach((child, index) => {
// 動態(tài)設置各個page內的options
if (child.option === null) {
let childOption = this.options[index];
this.$set(childOption,'index',index+1);
child.option = childOption;
}
});
}
高級屬性：新的鉤子函數
為了滿足部分使用者的需求，我在設置了兩個鉤子函數：beforeLeave和afterEnter。
這兩個鉤子函數可以設置在對應頁面的options屬性對象中，并且含有一個默認的參數，為對應頁面的page組件實例對象。
其實現方式為在原先的changePage函數（App.vue）內添加新的邏輯：
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]);
})
}
總結
這篇文章記錄了我開發(fā)一個FullPage頁面的總體流程，將主要的邏輯重新順理了一遍，還有一些小的細節(jié)沒有寫在文章中，有興趣的可以去具體的項目頁面看源碼
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了詳解vue 項目白屏解決方案，詳細的介紹了白屏的解決方案，非常具有實用價值，需要的朋友可以參考下2018-10-10
vue實現將自己網站(h5鏈接)分享到微信中形成小卡片的超詳細教程
在微信小程序中,可以很簡單的分享一個頁面,比微信H5簡單多了,下面這篇文章主要給大家介紹了關于vue實現將自己網站(h5鏈接)分享到微信中形成小卡片的超詳細教程,需要的朋友可以參考下2023-02-02
要想實現一個吸頂效果不是很難,網絡上有很多教程,其中有一種就是通過fiexd加top來實現,今天突然就想做一個吸頂效果,因為最近都在用vue,所以想用vue來做一個吸頂效果的案例,感興趣的朋友可以參考下2023-11-11
國際化是指項目能夠根據不同國家的語言進行轉換,便于不同國家的用戶使用,這篇文章主要給大家介紹了關于vue項目實現國際化的基本思路與詳細步驟,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了vue、react等單頁面項目應該這樣子部署到服務器，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01
Vue.js實現一個自定義分頁組件vue-paginaiton
這篇文章主要為大家詳細介紹了Vue.js實現一個自定義分頁組件vue-paginaiton的具體代碼,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
vant-list組件觸發(fā)多次onload事件導致數據亂序的解決方案
這篇文章主要介紹了vant-list組件觸發(fā)多次onload事件導致數據亂序的解決方案2023-01-01
這篇文章主要介紹了vue3 Vite 進階rollup命令行使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要介紹了vue elementUI 上傳非空驗證,原理就是寫一個假的紅色*號,每次點擊查看的時候執(zhí)this.rules.staffImg[0].required = false,本文結合實例代碼給大家介紹的非常詳細,需要的朋友參考下吧2023-12-12
這篇文章主要介紹了vue 項目中瀏覽器跨域的配置問題,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-11-11