parent
391876e0d9
commit
bbe8f1c65e
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,127 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title></title>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
||||||
|
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||||
|
<#--baseJs-->
|
||||||
|
<script src="${Uri.getUrl('/static/dist/lib.min.js')}" type="text/javascript"></script>
|
||||||
|
<#--移动端ui-->
|
||||||
|
<script src="${Uri.getUrl('/static/dist/mint-ui.min.js')}" type="text/javascript"></script>
|
||||||
|
<link href="${Uri.getUrl('/static/dist/mint-ui.min.css')}" rel="stylesheet"/>
|
||||||
|
<#--ajax接口-->
|
||||||
|
<script src="${Uri.getUrl('/static/js/ajax.js')}" type="text/javascript"></script>
|
||||||
|
<link href="${Uri.getUrl('/static/css/base.css')}" rel="stylesheet"/>
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
padding: 0px;
|
||||||
|
margin: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,body,#app{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-in-right-out-enter-active, .left-in-right-out-leave-active {
|
||||||
|
transition: all 0.3s linear;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-in-right-out-enter {
|
||||||
|
transform: translateX(-100%);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-in-right-out-leave-to {
|
||||||
|
transform: translateX(100%);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-in-left-out-enter-active, .right-in-left-out-leave-active {
|
||||||
|
transition: all .3s linear;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-in-left-out-enter {
|
||||||
|
transform: translateX(100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-in-left-out-leave-to {
|
||||||
|
transform: translateX(-100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-in-right-out-enter-active, .left-in-right-out-leave-active {
|
||||||
|
transition: all 0.3s linear;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-in-right-out-enter {
|
||||||
|
transform: translateX(-100%);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-in-right-out-leave-to {
|
||||||
|
transform: translateX(100%);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-in-left-out-enter-active, .right-in-left-out-leave-active {
|
||||||
|
transition: all .3s linear;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-in-left-out-enter {
|
||||||
|
transform: translateX(100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-in-left-out-leave-to {
|
||||||
|
transform: translateX(-100%);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app">
|
||||||
|
<transition :name="transitionName">
|
||||||
|
<router-view></router-view>
|
||||||
|
</transition>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<template id="home">
|
||||||
|
<div class="view">
|
||||||
|
<mt-header title="Hello world">
|
||||||
|
<router-link to="/" slot="left">
|
||||||
|
<mt-button icon="back">返回</mt-button>
|
||||||
|
</router-link>
|
||||||
|
<mt-button icon="more" slot="right"></mt-button>
|
||||||
|
</mt-header>
|
||||||
|
<div class="content" style="text-align: center;padding-top: 200px">
|
||||||
|
Hello world
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var router = new VueRouter({
|
||||||
|
routes: [
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
name: 'home',
|
||||||
|
component: Vue.extend({template: '#home'})
|
||||||
|
}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
var app = new Vue({
|
||||||
|
el: '#app',
|
||||||
|
data: {
|
||||||
|
transitionName: ''
|
||||||
|
},
|
||||||
|
router: router,
|
||||||
|
watch: {
|
||||||
|
'$route': function (to, from) {
|
||||||
|
this.transitionName = to.meta.index < from.meta.index ? 'left-in-right-out' : 'right-in-left-out'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
</html>
|
@ -1,48 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title></title>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
|
||||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
|
||||||
<#--baseJs-->
|
|
||||||
<script src="${Uri.getUrl('/static/dist/lib.min.js')}" type="text/javascript"></script>
|
|
||||||
<#--vonic移动端ui-->
|
|
||||||
<script src="${Uri.getUrl('/static/dist/vonic.min.js')}" type="text/javascript"></script>
|
|
||||||
<link href="${Uri.getUrl('/static/dist/vonic.min.css')}" rel="stylesheet"/>
|
|
||||||
<#--ajax接口-->
|
|
||||||
<script src="${Uri.getUrl('/static/js/ajax.js')}" type="text/javascript"></script>
|
|
||||||
<link href="${Uri.getUrl('/static/css/base.css')}" rel="stylesheet"/>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="app">
|
|
||||||
<router-link to="/">首页</router-link>
|
|
||||||
<router-link to="/next">next</router-link>
|
|
||||||
<transition name="wb-zoom-in-top">
|
|
||||||
<router-view></router-view>
|
|
||||||
</transition>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<template id="home"><div>home</div></template>
|
|
||||||
<template id="next"><div>next</div></template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
var router = new VueRouter({
|
|
||||||
routes:[
|
|
||||||
{
|
|
||||||
path: '/',
|
|
||||||
name: 'home',
|
|
||||||
component:Vue.extend({template: '#home'})
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/next',
|
|
||||||
name: 'next',
|
|
||||||
component:Vue.extend({template: '#next'})
|
|
||||||
}
|
|
||||||
]
|
|
||||||
});
|
|
||||||
var app = new Vue({
|
|
||||||
el: '#app',
|
|
||||||
router:router
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
</html>
|
|
Loading…
Reference in new issue