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>
代码案例见 https://github.com/yource/VueSPA
vue-router 手势滑动触发返回的更多相关文章
- vue router.push(),router.replace(),router.go()和router.replace后需要返回两次的问题
转载:https://www.cnblogs.com/lwwen/p/7245083.html https://blog.csdn.net/qq_15385627/article/details/83 ...
- iOS之手势滑动返回功能-b
iOS中如果不自定义UINavigationBar,通过手势向右滑是可以实现返回的,这时左边的标题文字提示的是上一个ViewController的标题,如果需要把文字改为简约风格,例如弄过箭头返回啥的 ...
- 再谈iOS 7的手势滑动返回功能
本文转载至 http://blog.csdn.net/jasonblog/article/details/28282147 之前随手写过一篇<使用UIScreenEdgePanGestureR ...
- iOS之手势滑动返回功能
iOS中如果不自定义UINavigationBar,通过手势向右滑是可以实现返回的,这时左边的标题文字提示的是上一个ViewController的标题,如果需要把文字改为简约风格,例如弄过箭头返回啥的 ...
- iOS 7的手势滑动返回
如今使用默认模板创建的iOS App都支持手势返回功能,假设导航栏的返回button是自己定义的那么则会失效,也能够參考这里手动设置无效. if ([self.navigationController ...
- 禁用ios7 手势滑动返回功能
禁用ios7 手势滑动返回功能 版权声明:本文为博主原创文章,未经博主允许不得转载. 在有的时候,我们不需要手势返回功能,那么可以在页面中添加以下代码: - (void)viewDidAppear:( ...
- Android-通过SlidingMenu高仿微信6.2最新版手势滑动返回(二)
转载请标明出处: http://blog.csdn.net/hanhailong726188/article/details/46453627 本文出自:[海龙的博客] 一.概述 在上一篇博文中,博文 ...
- Android-通过SlidingPaneLayout高仿微信6.2最新版手势滑动返回(一)
近期更新了微信版本号到6.2.发现里面有个很好的体验,就是在第二个页面Activity能手势向右滑动返回,在手势滑动的过程中能看到第一个页面,这样的体验很赞,这里高仿了一下. 这里使用的是v4包里面的 ...
- vue router 配合transition 切换动画
把<router-view>嵌套在<transition>里,路由变化的时候,vue会为包裹页面的div增加动画样式,我们要做的就是监听路由变化.定义这些动画样式,以规定页面到 ...
随机推荐
- Math.log()对数的妙用
###对数log 的妙用... formatBytes(bytes) { if (bytes === '0' || isNaN(bytes)) return ''; var s = ['Bytes', ...
- idea 没有智能提示
开发工具要对源码产生提示,现在比较流行的是使用 .d.ts 文件 来编写提示消息 以下的解决办法不是根本之道,估计是开发工具有什么地方可以设置 自动下载 .d.ts 文件,知道的读者还请留言赐教~ 使 ...
- (转) argparse — 解析命令参数和选项
原文地址:https://pythoncaff.com/docs/pymotw/argparse-command-line-option-and-argument-parsing/166 https: ...
- php -- 连接Mysql 数据库
----- 022-mysql.php ----- <!DOCTYPE html> <html> <head> <meta http-equiv=" ...
- 转:Intellij idea Version Control File Status Colors ( 版本控制文件状态颜色 )
https://blog.csdn.net/Bruce_Lee__/article/details/80261308 Added —— 添加 Added in not active changelis ...
- Vue笔记:使用node开发vue入门实例
安装NPM 首先在命令终端输入 npm -v 检测是否安装 npm.如果没有,按照下面教程进行安装. 下载地址: nodejs中文网 到官网下载自己系统对应的版本,这里我们下载Windows系统的64 ...
- List集合中的对象按照某个字段去重实现
package com.liying.banana.user; import java.util.ArrayList; import java.util.Comparator; import java ...
- Java的HashCode,Equal和==
----------------------------------------以下是分割线---------------------------------------- 我们都知道Java语言是完 ...
- let‘s encrypt之nginx-https没有小锁
1.使用let's encrypt 加密后的nginx,访问的时候,发现没有小锁,chrome中: 火狐浏览器上: 会看到如上信息,这是因为css.图片或javascript任然通过http提供,可以 ...
- (win10)Wamp环境下php升级至PHP7.2
(win10)Wamp环境下php升级至PHP7.2 ①下载php7.2到本地 链接:https://pan.baidu.com/s/16jqmF7GR_CRklHPAZ9VRrg 密码:4ob4 ② ...