vue-router 手勢滑動觸發返回

vue-router的路由變換隻存在“變換前”和“變換後”，不存在“切換中”的狀態，所以做不到大多數app（微信那樣的）在滑動過程中讓介面跟隨手指移動。但滑動事件還是可以監聽的，我們可以在滑動之後再觸發路由回退事件。

　　微博的滑動返回基本上就是這樣的原理：先滑動、再觸發返回事件，但用起來很是怪異，有嚴重的滯後感。夸克瀏覽器做的就比較好：一是滑動時介面雖然不動，但是介面上有小圖示提示，能讓使用者接受到反饋；二是返回過程很快，沒有多餘的過渡動畫。

　　app.vue檔案如下：

<template>
    <div id="app" v-on:touchstart="bodyTouchStart" v-on:touchmove="bodyTouchMove" v-on:touchend="bodyTouchEnd">
        <transition :name="direction">
            <keep-alive include="home">
                <router-view class="appView"></router-view>
            </keep-alive>
        </transition>
    </div>
</template>

<script>
var swidth = document.documentElement.clientWidth;

export default {
    name: 'app',
    data: () => ({
        // direction 頁面切換的過渡動畫，配合transition元件使用
        direction: "slide-left",
        // touchLeft 划動起點界限，起點在靠近螢幕左側時才有效
        touchLeft: swidth*2/5,
        // touchStartPoint 記錄起始點X座標
        touchStartPoint: 0,
        // distance 記錄划動的距離
        distance: 0,
        // 回退按鈕的dom，根據頁面上是否存在此dom來判斷該路由是否可回退
        backBtn: null
    }),

    watch: {
        // 監聽路有變化，決定頁面過渡動畫
        $route(to, from) {
            if (from.name == "login" || from.path.indexOf("home") > -1) {
                this.direction = "slide-left";
            } else if (to.path.indexOf("home") > -1) {
                this.direction = "slide-right";
            } else {
                const toDepth = to.path.split("/").length;
                const fromDepth = from.path.split("/").length;
                this.direction = toDepth < fromDepth ? "slide-right" : "slide-left";
            }
        }
    },

    methods: {
        bodyTouchStart: function(event) {
            this.backBtn = document.getElementById("navback");
            if (this.backBtn) {
                // 獲得起點X座標，初始化distance為0
                this.touchStartPoint = event.targetTouches[0].pageX;
                this.distance = 0;
            }
        },
        bodyTouchMove: function(event) {
            if (this.backBtn && this.touchStartPoint < this.touchLeft) {
                // 只監聽單指划動，多指划動不作響應
                if (event.targetTouches.length > 1) {
                    return;
                }
                // 實時計算distance
                this.distance = event.targetTouches[0].pageX - this.touchStartPoint;
                // 根據distance在頁面上做出反饋。這裡演示通過返回按鈕的背景變化作出反饋
                if (this.distance > 0 && this.distance < 100) {
                    this.backBtn.style.backgroundPosition = ((this.distance - 100) / 100) * 50 + "px 0";
                } else if (this.distance >= 100) {
                    this.backBtn.style.backgroundPosition = "0 0";
                } else {
                    this.backBtn.style.backgroundPosition = "-50px 0";
                }
            }
        },
        bodyTouchEnd: function(event) {
            if (this.backBtn && this.touchStartPoint < this.touchLeft) {
                // 划動結束，重置資料
                this.touchStartPoint = 0;
                this.backBtn.style.backgroundPosition = "-50px 0";
                // 當划動距離超過100px時，觸發返回事件
                if (this.distance > 100) {
                    // 返回前修改樣式，讓過渡動畫看起來更快
                    document.getElementById("app").classList.add("quickback");
                    this.$router.back();
                    setTimeout(function(){
                        document.getElementById("app").classList.remove("quickback");
                    },250)
                }
            }
        }
    }
}
</script>

<style>
#app {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 100%;
    overflow-x: hidden;
}
.appView {
    position: absolute;
    width: 100%;
    background: #fff;
    min-height: 100vh;
    transition: transform 0.24s ease-out;
}
#app.quickback .appView{
    transition-duration: 0.1s;
}
.slide-left-enter {
    transform: translate(100%, 0);
}
.slide-left-leave-active {
    transform: translate(-50%, 0);
}
.slide-right-enter {
    transform: translate(-50%, 0);
}
.slide-right-leave-active {
    transform: translate(100%, 0);
}
</style>
複製程式碼