vue页面滑动

版权声明:本文为博主原创文章,未经博主允许不得转载。

 

前言

vue单页面应用的左右滑动效果!原生APP的一级二级页面进入和返回会有左/右滑出的效果,很多多级目录我们会在router里声明children,子集的page会显示在父集设置的router-view里,当该应用为h5应用并且父子集的url都有不同参数时,会非常容易出问题,所以我做了一个一级页面的滑动实现。

设置页面等级

我们可以在router.js里面设置meta

1
2
3
4
5
6
7
8
9
10
11
export default [{
path: '/',
component: App,
children: [
{path: '', redirect: '/Home',}, //地址为空时跳转home页面
{path: '/Home', component: Home,meta:{title:'一级',route:'1'}},
{path: '/ServiceProcess', component: ServiceProcess,meta:{title:'二级',route:'2'}},
{path: '/ProfessionalAdvisers', component: ProfessionalAdvisers,meta:{title:'三级',route:'3'}},
{path: '/SigoyiMan', component: SigoyiMan,meta:{title:'四级',route:'4'}},
]
}]

类似上面这样。

滑动设置

这个要放到App.vue中用watch监听

1
2
3
4
5
6
7
watch: {
'$route'(to, from, next) {
let fromRoute = from.meta.route;
let toRoute = to.meta.route;
this.transitionName = toRoute < fromRoute ? 'slide-right' : 'slide-left';
}
}

点击之后对比route大小就会知道是要进入子页面还是返回父页面了。

备注:记得router-view要用transition包住,设置响应的slide-right/slide-left样式,是不是很简单?