在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
来判断,当然还可以用别的
在首页或者个人信息页面(某些固定页面),点击返回提示‘再点一次退出’,再点击则退出app
document.addEventListener("backbutton", function (e) { //调用原生方法
let pageHash = window.location.hash;
let back = person.$route.meta.back; //person是全局的vue实例化对象,相当于经常用的this
if (back === 'exit') {
if (exitAppTicker === 0) {
exitAppTicker++;
MintUI.Toast('再点一次退出');//UI插件提示信息
setTimeout(function () {
exitAppTicker = 0;
}, 2000);
} else if (exitAppTicker === 1) {
navigator.app.exitApp(); //退出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');
}