vue-router的路由变换只存在“变换前”和“变换后”，不存在“切换中”的状态，所以做不到大多数app（微信那样的）在滑动过程中让界面跟随手指移动。但滑动事件还是可以监听的，我们可以在滑动之后再触发路由回退事件。
微博的滑动返回基本上就是这样的原理：先滑动、再触发返回事件，但用起来很是怪异，有严重的滞后感。夸克浏览器做的就比较好：一是滑动时界面虽然不动，但是界面上有小图标提示，能让用户接受到反馈；二是返回过程很快，没有多余的过渡动画。
app.vue文件如下：
<template> <div v-on:touchstart="bodyTouchStart" v-on:touchmove="bodyTouchMove" v-on:touchend="bodyTouchEnd"> <transition :name="direction"> <keep-alive include="home"> <router-view></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("https://www.jb51.net/").length; const fromDepth = from.path.split("https://www.jb51.net/").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>
下面看下vue图片左右滑动及手势缩放
引入vue-awesome-swiperimport 'swiper/dist/css/swiper.css';
import { swiper, swiperSlide } from 'vue-awesome-swiper';components: { swiper, swiperSlide, },data() { return { swiperOption: { width: window.innerWidth, zoom : true, initialSlide: 0, }, }; },<swiper :options="swiperOption" ref="imgOverview"> <swiper-slide v-for="(img, index) in previewImg"> <div> <img :src="img" alt=""> </div> </swiper-slide> </swiper>
代码案例见 https://github.com/yource/VueSPA
总结
以上所述是小编给大家介绍的vue-router 手势滑动触发返回功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: