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

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

　　　　程式碼地址：https://github.com/dreamITGirl/vuepageturn  //demo

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

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

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

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

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

  <v-touch class="container" 
                 @panstart.prevent="panStart"
                 @panmove.prevent="panMove"
                 @panend.prevent="panEnd">
            <component v-for="(val,index) in componentList" 
                        :key="index" :is="val" 
                        :style
 
="{
                            zIndex:zIndex(index),
                            top:top(index),
                            transition:`all ${transition(index)}s`,
                            transform:`translateY(${top(index)}) scale3d(${scale(index)},1,${scale(index)})`
                        }"
                        
            ></component>  
              
   </v-touch>

　　如果在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分別對應顯示。