滑動tab及3d翻頁組件

滑動Tab組件（swipe-tab）

基本思路

1.監聽如下touch事件

touchstart: //手指放到屏幕上時觸發

touchmove: //手指在屏幕上滑動時觸發

touchend: //手指離開屏幕時觸發

2.計算滑動值並設置

在touchmove事件回調中動態設置容器的transform中的translate3d屬性，以達到tab隨滑動而移動的效果

3.在touchend回調中設置滑動切換tab的閾值

即在tab滑動超出必定閾值時釋放，tab自動切換

在線瀏覽

推薦手機訪問

源碼

詳見個人github

翻頁組件（touch-flipbook）

dom結構

<div class="touch-flipbook" ref="touchCon" @touchstart.prevent="TouchStart" @touchmove.prevent="TouchMove"
@touchend="TouchEnd">
    <div class="page p0">
    <!-- /* page有先後兩面 */ -->
        <div class="front">0正</div>
        <div class="back">0反</div>
    </div>
    <!-- /* page2爲翻頁以後顯示的*/  -->
    <div class="page p1">
        <div class="front">1正</div>
        <div class="back">1反</div>
    </div>
    <div class="page p2">
        <div class="front">2正</div>
        <div class="back">2反</div>
    </div>
</div>
複製代碼

touch事件的處理與上述滑動Tab的處理方式大體相同，不一樣在於

此處需動態設置爲transform中的rotate屬性。

須要注意的有如下幾點：

• 因爲front跟back是重疊的，經過翻轉以後back也會出現鏡像，此時需設置 scaleY(1)來解決鏡像問題。
• z-index須要特別關注，越上面的page的z-index越大，翻頁前front的z-index大於back，翻頁後相反
• 每個page的翻轉值需保存起來，方便後續翻頁翻回該頁的時候修改。

在線瀏覽

推薦手機訪問

源碼

詳見個人github