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为0this.touchStartPoint = event.targetTouches[0].pageX;this.distance = 0;}},bodyTouchMove: function(event) {if (this.backBtn && this.touchStartPoint < this.touchLeft) {// 只监听单指划动，多指划动不作响应if (event.targetTouches.length > 1) {return;}// 实时计算distancethis.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> 复制代码

转载于:https://juejin.im/post/5c22f68a5188257abf1d8789

总结

以上是生活随笔为你收集整理的vue-router 手势滑动触发返回的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。