h5制作app，处理跳转翻页动画效果及android返回键路由跳转问题

在h5制作的app中，设计路由跳转及跳转翻页动画是最必要的。其中有很多需要注意的问题，分享下小编的处理方式~

一、翻页效果

首先，跳转翻页动画的监控，因为小编是用vue学的，所以在app.vue中监控路由变化，设置路由跳转动画

$route(to, from) {if (from.name === null) {this.transitionName = "";} else {if (!this.map[to.fullPath]) {this.map[to.fullPath] = +new Date() + 1;}if (!this.map[from.fullPath]) {this.map[from.fullPath] = +new Date();}if (this.map[to.fullPath] > this.map[from.fullPath]) {// 到子页面this.transitionName = "slide-forward";} else {// 到父页面this.transitionName = "slide-back";}}

css

.slide-forward-enter {transform: translate(100%);
}.slide-forward-leave-to {opacity: 0;
}.slide-forward-enter-to,
.slide-forward-leave {opacity: 1;
}.slide-forward-enter-active,
.slide-forward-leave-active {transition: all 0.4s;
}.slide-back-enter {opacity: 0;
}.slide-back-leave-to {transform: translate(100%);
}.slide-back-enter-to,
.slide-back-leave {opacity: 1;transform: translate(0);
}.slide-back-enter-active,
.slide-back-leave-active {transition: all 0.4s;
}

问题

动画的问题是，同样的页面，如果在不同的地方显示，会造成和其他路由出现的顺序问题，为了避免这种状况，在不同的地方，使用同一个页面，最好设置成不同的路由！
否则如果相同的页面太多，路由跳转能恶心死你
实在分不开的页面，路由可以做判断，比如：

if (from.fullPath.indexOf('fencemana')!==-1 && (to.fullPath.indexOf('editcar')!==-1 || to.fullPath.indexOf('editminecar')!==-1)) {// 到父页面this.transitionName = "slide-back";
}

那在页面中怎么做区分呢？

{path: '/register/fencemana', name: 'FenceMana', component: FenceMana, meta: {name: 'registerFence',back: 'normal', islogin: false}}

可以用$route.meta.name来判断，当然还可以用别的

二、android返回键路由跳转

1.在固定页面点击两次返回退出app

在首页或者个人信息页面（某些固定页面），点击返回提示‘再点一次退出’，再点击则退出app

document.addEventListener("backbutton", function (e) { //调用原生方法let pageHash = window.location.hash;let back = person.$route.meta.back; //person是全局的vue实例化对象，相当于经常用的thisif (back === 'exit') {if (exitAppTicker === 0) {exitAppTicker++;MintUI.Toast('再点一次退出');//UI插件提示信息setTimeout(function () {exitAppTicker = 0;}, 2000);} else if (exitAppTicker === 1) {navigator.app.exitApp(); //退出app}}
}

2.在app中页面，点击返回

在app中页面，点击返回，会返回上一层，但是直接history.back();，会出现问题，比如，从A跳到B，再手动返回A，这时候，点击手机的返回键，会造成死循环，所以此时，就需要自己做处理，强制跳转真正的上一层

一般，如果是路由的最后一层，直接返回上一层即可，中间的页面，需要自己处理，比如：

// 禁止返回
else if (back === 'refuse') {// 禁止e.preventDefault();
} else if (pageHash.indexOf('/mine/index') !== -1) {person.$router.push('/main');//person是全局的vue实例化对象，相当于经常用的this
} else if (pageHash.indexOf('/mine/carmana') !== -1) {person.$router.push('/mine/index');
}

h5制作app，处理跳转翻页动画效果及android返回键路由跳转问题相关推荐

windows phone水平滑动翻页动画效果
转自:http://www.cnblogs.com/poorpan/archive/2012/04/23/2466413.html 大家看windows phone上的应用,很多都用到了这种效果 ,想 ...
iOS动效-利用CATransform3D实现翻页动画效果
从事iOS开发已经有一段时间了,之前一直忙于工作,几乎很少有时间写一些东西来对自己掌握的技术进行一下总结,现在想想,有些后悔,因为之前在遇见问题的时候或者学习新技术的时候都是在翻看他人的博客或者查看苹 ...
jquery css3问卷答题卡翻页动画效果
这个选项调查的特效以选项卡的形式,每答完一道题目自动切换到下一条,颇具特色.使用jQuery和CSS3,适合HTML5浏览器. 效果展示 http://hovertree.com/texiao/jqu ...
【iOS】如何在UICollection中实现特殊翻页动画效果
需求: 实现类似下列的动画效果,要求,左右可以滚动UICollection浏览,向上滑动可以把当前图片丢进垃圾桶特殊UICollection动画效果技术点: 需要结合UIScrollView回调跟 ...
UE4 Material 101学习笔记——01-07 介绍/PBR基础/UV扭曲/数据类型/翻页动画/材质混合/性能优化
UE4 Material 101学习笔记--01-07 介绍/PBR基础/UV扭曲/数据类型/翻页动画/材质混合/性能优化 Lec 01 什么是着色器 What Is A Shader? 1.1 介绍 ...
OneClock的翻页时钟效果是如何实现的
OneSwift - iOS Tips Based On Swift OneClock目前的三个表盘中用户最喜欢的是翻页时钟.翻页效果是表盘的核心,也是我花时间调试最久的细节.经过7次的产品迭代,终于 ...
Android开发笔记（十八）书籍翻页动画PageAnimation
前面几节的动画都算简单,本文就介绍一个复杂点的动画--书籍翻页动画.Android有自带的翻页动画ViewPager,不过ViewPager只实现了平移效果.即便使用补间组合动画或者属性动画,也只是把 ...
android sdio 时钟 ios-clock,【ios学习】OneClock的翻页时钟效果是如何实现的
OneClock目前的三个表盘中用户最喜欢的是翻页时钟.翻页效果是表盘的核心,也是我花时间调试最久的细节.经过7次的产品迭代,终于调整到了一个合适的效果. 实现这个动效的方法只需用到CABasicAn ...
【ios学习】OneClock的翻页时钟效果是如何实现的
OneClock目前的三个表盘中用户最喜欢的是翻页时钟.翻页效果是表盘的核心,也是我花时间调试最久的细节.经过7次的产品迭代,终于调整到了一个合适的效果. 实现这个动效的方法只需用到CABasicAn ...