Vue实现移动端页面切换效果【推荐】

程序员文章站 2023-11-26 15:37:16

在子页面把整个页面做绝对定位，覆盖整个屏幕，子父页面将 router-view 用 transition 套起来，并加上过渡动画就可以啦。代码：...

在子页面把整个页面做绝对定位，覆盖整个屏幕，子父页面将 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>

效果：

Vue实现移动端页面切换效果【推荐】

有一个问题需要注意一下，

我们知道，在应用transform属性的时候，fixed定位会变成absolute。

这里，页面转换的时候，就变成了相对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>

看下效果：

Vue实现移动端页面切换效果【推荐】

okok，反正就是这种bug嘛。

解决办法就是，就是，尽量让页面fixed定位都是0 0 0 0，然后偏移用padding实现。

大概吧……反正我是这么解决的……

比如上面那个可以把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>

看效果，第二页的高度明明就是视窗的高度，但是它有一个滚动条，实际上那是第一个页面的滚动条。

网上找了好多方法，一一试了，全部不生效。（当然很有可能是我的方法不对。

Vue实现移动端页面切换效果【推荐】

最后没办法只有找最笨的方法啦，就是通过 v-if 把父页面不显示就好了。

当然不能直接不显示，因为动画还没结束父元素就空白了呀！settimeout 就好了……

具体代码就不写了，这个应该很容易理解。

以上所述是小编给大家介绍的vue实现移动端页面切换效果，希望对大家有所帮助

上一篇：浅谈Vue组件及组件的注册方法

下一篇： vue-router传递参数的几种方式实例详解

Vue实现移动端页面切换效果【推荐】

Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)

Vue实现移动端页面切换效果【推荐】

js移动端滑动事件（js实现左右滑动页面效果）

vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】

vue 和vue-touch 实现移动端左右导航效果（仿京东移动站导航）

js实现移动端tab切换时下划线滑动效果

vue实现app页面切换动画效果实例

vue-router实现webApp切换页面动画效果代码

Vue实现移动端左右滑动效果的方法

Vue 页面切换效果之 BubbleTransition(推荐)