vue手势滚动_vue-router 手势滑动触发返回功能

vue-router的路由变换只存在“变换前”和“变换后”，不存在“切换中”的状态，所以做不到大多数app(微信那样的)在滑动过程中让界面跟随手指移动。但滑动事件还是可以监听的，我们可以在滑动之后再触发路由回退事件。

微博的滑动返回基本上就是这样的原理：先滑动、再触发返回事件，但用起来很是怪异，有严重的滞后感。夸克浏览器做的就比较好：一是滑动时界面虽然不动，但是界面上有小图标提示，能让用户接受到反馈；二是返回过程很快，没有多余的过渡动画。

app.vue文件如下：

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)

}

}

}

}

}

#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);

}

下面看下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,

},

};

},

总结

以上所述是小编给大家介绍的vue-router 手势滑动触发返回功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！