vue-router的路由變換只存在“變換前”和“變換后”，不存在“切換中”的狀態(tài)，所以做不到大多數(shù)app（微信那樣的）在滑動(dòng)過程中讓界面跟隨手指移動(dòng)。但滑動(dòng)事件還是可以監(jiān)聽的，我們可以在滑動(dòng)之后再觸發(fā)路由回退事件。

　　微博的滑動(dòng)返回基本上就是這樣的原理：先滑動(dòng)、再觸發(fā)返回事件，但用起來很是怪異，有嚴(yán)重的滯后感。夸克瀏覽器做的就比較好：一是滑動(dòng)時(shí)界面雖然不動(dòng)，但是界面上有小圖標(biāo)提示，能讓用戶接受到反饋；二是返回過程很快，沒有多余的過渡動(dòng)畫。

　　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 頁面切換的過渡動(dòng)畫，配合transition組件使用direction: "slide-left",// touchLeft 劃動(dòng)起點(diǎn)界限，起點(diǎn)在靠近屏幕左側(cè)時(shí)才有效touchLeft: swidth*2/5,// touchStartPoint 記錄起始點(diǎn)X坐標(biāo)touchStartPoint: 0,// distance 記錄劃動(dòng)的距離distance: 0,// 回退按鈕的dom，根據(jù)頁面上是否存在此dom來判斷該路由是否可回退backBtn: null}),watch: {// 監(jiān)聽路有變化，決定頁面過渡動(dòng)畫$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) {// 獲得起點(diǎn)X坐標(biāo)，初始化distance為0this.touchStartPoint = event.targetTouches[0].pageX;this.distance = 0;}},bodyTouchMove: function(event) {if (this.backBtn && this.touchStartPoint < this.touchLeft) {// 只監(jiān)聽單指劃動(dòng)，多指劃動(dòng)不作響應(yīng)if (event.targetTouches.length > 1) {return;}// 實(shí)時(shí)計(jì)算distancethis.distance = event.targetTouches[0].pageX - this.touchStartPoint;// 根據(jù)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) {// 劃動(dòng)結(jié)束，重置數(shù)據(jù)this.touchStartPoint = 0;this.backBtn.style.backgroundPosition = "-50px 0";// 當(dāng)劃動(dòng)距離超過100px時(shí)，觸發(fā)返回事件if (this.distance > 100) {// 返回前修改樣式，讓過渡動(dòng)畫看起來更快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> 復(fù)制代碼

轉(zhuǎn)載于:https://juejin.im/post/5c22f68a5188257abf1d8789

總結(jié)

以上是生活随笔為你收集整理的vue-router 手势滑动触发返回的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。