Vue實現(xiàn)移動端頁面切換效果【推薦】
在子頁面把整個頁面做絕對定位,覆蓋整個屏幕,子父頁面將 router-view 用 transition 套起來,并加上過渡動畫就可以啦。
代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" 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 { 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: 0; 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 id="app"> <div class="one"> <p> <router-link to="/foo">下一層</router-link> </p> <h1>第一層</h1> </div> <transition> <router-view></router-view> </transition> </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 class="whole-page two"> <router-link to="/foo/bar">下一層</router-link> <router-link to="/">返回</router-link> <h1>第二層</h1> <transition> <router-view></router-view> </transition> </div> ` } const Bar = { template: ` <div class="whole-page three"> <router-link to="/foo">返回</router-link> <h1>第三層</h1> <transition> <router-view></router-view> </transition> </div> ` } const routes = [ { path: '/foo', component: Foo, children: [ { path: 'bar', component: Bar } ] } ] const router = new VueRouter({ routes }) const app = new Vue({ router }).$mount('#app') </script> </body> </html>
效果:
有一個問題需要注意一下,
我們知道,在應用transform屬性的時候,fixed定位會變成absolute。
這里,頁面轉(zhuǎn)換的時候,就變成了相對translation定位。所以如果子頁面中有絕對定位的話,移動的過程中頁面會變形。
簡單舉個栗子,
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" 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%; } #app { padding-top: 50px; } .one { height: 100%; background-color: yellow;} .two { background-color: tomato; position: fixed; top: 100px; bottom: 0; left: 0; right: 0; }.v-enter-active, .v-leave-active { transition: all 0.3s; } .v-enter, .v-leave-to { transform: translateX(100%); } header { height: 50px; background-color: #000; width: 100%; position: fixed; top: 0; color: #fff; line-height: 50px; text-align: center; } .two header { top: 50px; background-color: #666; } </style> </head> <body> <div id="app"> <header>我是一個標題</header> <div class="one"> <p> <router-link to="/foo">下一層</router-link> </p> <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 class="whole-page two"> <router-link to="/">返回</router-link> <header>我也是一個標題</header> <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>
看下效果:
OKOK,反正就是這種bug嘛。
解決辦法就是,就是,盡量讓頁面fixed定位都是0 0 0 0,然后偏移用padding實現(xiàn)。
大概吧……反正我是這么解決的……
比如上面那個可以把CSS改成這樣解決問題。
* { padding: 0; margin: 0; } html, body, #app { width: 100%; height: 100%; } #app { padding-top: 50px; } .one { height: 100%; background-color: yellow;} .two { background-color: tomato; position: fixed; top: 0; padding-top: 100px; bottom: 0; left: 0; right: 0; }.v-enter-active, .v-leave-active { transition: all 0.3s; } .v-enter, .v-leave-to { transform: translateX(100%); } header { height: 50px; background-color: #000; width: 100%; position: fixed; top: 0; color: #fff; line-height: 50px; text-align: center; z-index: 100; } .two header { top: 50px; background-color: #666; }
嗯嗯 還有一個問題,還有個滑動穿透的問題,(真開心! 這么多問題!
我再舉個栗子,
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" 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 id="app"> <div class="one"> <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 class="whole-page two"> <router-link to="/">返回</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>
看效果,第二頁的高度明明就是視窗的高度,但是它有一個滾動條,實際上那是第一個頁面的滾動條。
網(wǎng)上找了好多方法,一一試了,全部不生效。(當然很有可能是我的方法不對。
最后沒辦法只有找最笨的方法啦,就是通過 v-if 把父頁面不顯示就好了。
當然不能直接不顯示,因為動畫還沒結(jié)束父元素就空白了呀!setTimeout 就好了……
具體代碼就不寫了,這個應該很容易理解。
以上所述是小編給大家介紹的Vue實現(xiàn)移動端頁面切換效果,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
vue如何實現(xiàn)el-select下拉選項的懶加載
這篇文章主要介紹了vue如何實現(xiàn)el-select下拉選項的懶加載,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04vue的Virtual Dom實現(xiàn)snabbdom解密
這篇文章主要介紹了vue的Virtual Dom實現(xiàn)- snabbdom解密,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-05-05vue移動端html5頁面根據(jù)屏幕適配的四種解決方法
在vue移動端h5頁面當中,其中適配是經(jīng)常會遇到的問題,這塊主要有四個方法可以適用。這篇文章主要介紹了vue移動端h5頁面根據(jù)屏幕適配的四種方案 ,需要的朋友可以參考下2018-10-10vue啟動后請求后端接口報ERR_EMPTY_RESPONSE錯誤的解決
這篇文章主要介紹了vue啟動后請求后端接口報ERR_EMPTY_RESPONSE錯誤的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-05-05