vue實作上下滑動翻頁_基于vue實作上下滑動翻頁效果

18年年底的時候，一直在做年度報告的H5頁面，因為項目需要，需要實作上下滑動翻頁，并且上滑的頁面比正常頁面的比例要縮小一定比例。

效果類似于http://www.17sucai.com/pins/demo-show?id=7834，這個連結是基于jquery實作的，我寫的是和這個例子效果一樣，隻不過是用vue實作的。

首先介紹一下，這個項目依賴的插件：上下滑動翻頁使用了v-touch，是基于hammer.js進行的vue封裝。也可以不用這個插件寫，直接用js原生，通過touchStart,touchMove,touchEnd來實作也是可以的;

現在總結一下幾點，是我在寫代碼的時候遇到的坑。

1、因為我是使用的是v-touch裡的pan屬性及它附帶的方法和事件。是以，在元件内部如果還有滾動的區域，就可能會出現沖突，最後項目上線之前，仍沒有徹底解決。

不管是用v-touch還是用js原生，都會出現這個問題，在實作上下頁面滑動切換時，采用了純css去控制上下滑動的距離。是以，css可能會沖突。是以，建議不要在使用v-touch或者js原生滾動區域内部再次出現滾動區域。

下一篇部落格會重點說一下這個問題的解決方式。

>

如果在component中仍有滑動的區域的話，就會産生css沖突。

2、滾動距離的計算

看圖了解

頁面1，頁面2，頁面3分别對應我要上下滑動切換的頁面，并且，1，2，3分别對應元件中的三個元件，也就是說，每個頁面都是一個獨立的元件。而這些元件是通過v-for的方式循環渲染的。

需要控制的是每個頁面的top值，z-index值，scale值，以及為了實作平滑的效果transition的過渡時間。

當頁面向上(下)滑動時，頁面3(頁面1)就變成了目前展示的頁面，頁面2就變成了前一個頁面(下一個頁面)，因為頁面3(頁面1)是最後(第)一個頁面了，使用者不能再繼續向下滑，

是以，我們需要在panmove和panend時去依據目前的index值和目前展示的元件數組中最後一項和第一項去判斷

重點說一下在panmove的時候，也就是在滾動過程中的時候，頁面的變化以及top值和滑動的距離是如何計算的。還是看圖：

這個裡面最難了解的就是這個上滑，或者下滑的距離，在我的代碼裡，1.0版本的并沒有解決兩個頁面始終差一段距離，這個距離就是distance的2/3，在panend的時候，我們需要看一下使用者滑動的距離是不是可以翻頁，如果距離很小，則不能翻頁，最好加一下判斷。

上滑之後，頁面1就變成了其他頁面，頁面2變成了前一個頁面，頁面3變成了目前頁面，對這3個頁面來說，它們各向上走了一個螢幕的高度，而頁面3的高度top值變成了0，頁面2變成了-1*螢幕的高度。頁面1則變成了-2 * 螢幕的高度，但是對于頁面1來說，已經變成了其他的圖檔，是以它的高度，是(它的index-目前的index)*螢幕的高度。

對于目前上滑(下滑)的頁面縮放的解決，是在panstart的時候，設定目前頁面的縮放率為1，在panmove的時候根據滑動的距離，随機設定縮放率。在panend的時候，設定延遲，使縮放率變成。

是以，正常的滑動過程中的樣式是

具體的代碼，大家可以去github上自行下載下傳使用，如果不使用v-touch,也可以用touchStart,touchMove,touchEnd分别對應顯示。

更新：1.1版本中删掉了component循環渲染時的top屬性，這樣，在上滑下滑的時候，就不會出現中間的距離差，隻會按照js控制達到的樣式距離走。