<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> <title>Document</title> <style> * { padding: 0; margin: 0; } html, body, #app { width: 100%; height: 100%; } .one { min-height: 100%; background-color: yellow;} .two { background-color: tomato; position: fixed; top: 0; bottom: 0; left: 0; right: 0; } .three { background-color: #ffe69f; position: fixed; top: 50px; bottom: 0; left: 0; right: 0; } .v-enter-active, .v-leave-active { transition: all 0.3s; } .v-enter, .v-leave-to { transform: translateX(100%); } </style> </head> <body> <div> <div> <p> <router-link to="/foo">下一层</router-link> </p> <h1>第一层</h1><h1>第一层</h1><h1>第一层</h1><h1>第一层</h1><h1>第一层</h1> <h1>第一层</h1><h1>第一层</h1><h1>第一层</h1><h1>第一层</h1><h1>第一层</h1> <h1>第一层</h1><h1>第一层</h1><h1>第一层</h1><h1>第一层</h1><h1>第一层</h1> <transition> <router-view></router-view> </transition> </div> </div> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <script> const Foo = { template: ` <div> <router-link to="https://www.jb51.net/">返回</router-link> <h1>第二层</h1> <transition> <router-view></router-view> </transition> </div> ` } const routes = [ { path: '/foo', component: Foo } ] const router = new VueRouter({ routes }) const app = new Vue({ router }).$mount('#app') </script> </body> </html>
看效果，第二页的高度明明就是视窗的高度，但是它有一个滚动条，实际上那是第一个页面的滚动条。
网上找了好多方法，一一试了，全部不生效。（当然很有可能是我的方法不对。
最后没办法只有找最笨的方法啦，就是通过 v-if 把父页面不显示就好了。
当然不能直接不显示，因为动画还没结束父元素就空白了呀！setTimeout 就好了……
具体代码就不写了，这个应该很容易理解。
以上所述是小编给大家介绍的Vue实现移动端页面切换效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: