Vue实现移动端页面切换效果

找了好多博客实现效果都……emmm……

应用Vue自带的过渡《进入/离开 & 列表过渡》和嵌套路由和 fixed定位实现

其实还是挺简单的。

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

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

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

比如上面那个可以把CSS改成这样解决问题。

* { padding:; margin:; }

html, body, #app { width: 100%; height: 100%; }

#app { padding-top: 50px; }

.one { height: 100%; background-color: yellow;}

.two { background-color: tomato; position: fixed; top:; padding-top: 100px; bottom:; left:; right:; }.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:; color: #fff; line-height: 50px; text-align: center; z-index:; }

.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>

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

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

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

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

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

还有什么问题，等我想起来在补充。或者还有什么没注意到的问题，欢迎路过的大佬们提出呀，反正我也解决不了。

Vue实现移动端页面切换效果的更多相关文章

jquery mobile页面切换效果(Flip toggle switch)(注：jQuery移动使用的数据属性的列表。 )
1.页面切换(data-transition)
Android - FragmentTabHost 与 Fragment 制作页面切换效果
使用 FragmentTabHost 与 Fragment 制作页面切换效果 API 19 TabHost已经不建议使用了.用 FragmentTabHost 来代替TabHost.实际上 Fragm ...
Android - TabHost 与 Fragment 制作页面切换效果
Android - TabHost 与 Fragment 制作页面切换效果 Android API 19 , API 23 三个标签页置于顶端效果图: 在文件BoardTabHost.java中定义 ...
html5各种页面切换效果和模态对话框
页面动画:data-transition 属性可以定义页面切换是的动画效果.例如:<a href="index.html" data-transition="pop ...
基于html5和css3响应式全屏滚动页面切换效果
分享一款全屏响应式的HTML5和CSS3页面切换效果.这个页面布局效果对于那些页面要求固定100%高度和宽度的网站和APP来说是十分有用的.效果图如下: 在线预览源码下载 HTML wrappe ...
WP8 NavigationInTransition实现页面切换效果
NavigationInTransition这个是实现页面切换效果,而且没控件来拖,要自己手动写, 将App.xaml.cs中InitializePhoneApplication()函数里的RootF ...
在uwp仿IOS的页面切换效果
有时候我们需要编写一些迎合IOS用户使用习惯的uwp应用,我在这里整理一下仿IOS页面切换效果的代码. 先分析IOS的页面切换.用户使用左右滑动方式进行前进和后退,播放类似于FlipView的切换动画 ...
[Swift通天遁地]九、拔剑吧-(7)创建旋转和弹性的页面切换效果
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
[Swift通天遁地]九、拔剑吧-(8)创建气泡式页面切换效果
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

随机推荐

jq实现多选反选
<script type="text/javascript"> $('input [name="ckball"]').click(functi ...
.net 第一次请求比较慢
为了提高访问速度,也便有了预编译. 关于ASP.NET网站:每个页面都编译成一个.dll文件用Assembly.GetExecutingAssembly().Location 查看而ASP.NET ...
css居中，margin_and_position
首先父元素肯定是要相对定位的,其次我们上下左右居中的元素的css如下: width: 50px; height: 50px; margin: auto; position: absolute; lef ...
sklearn库线性回归库 LinearRegression
import numpy as np import sklearn.datasets #加载原数据 from sklearn.model_selection import train_test_spl ...
一年前的很水的渣网页(第一次html试水)
<!doctype html> <html lang="zh-cn"> <base target="_blank" /> & ...
Handler Timer TimerTask ScheduledExecutor 循环任务解析
使用Handler执行循环任务 private Handler handler = new Handler(); private int mDelayTime = 1000; private Runn ...
数据分析——matplotlib
基础 # coding=utf-8 import matplotlib.pyplot as pt import numpy as np from matplotlib import font_mana ...
win10 vscode使用智能提示
1.没有第三方库的智能提示参考:https://code.visualstudio.com/docs/python/editing 1.点开Settings 2.搜索加添加 3.添加后的内容然后就 ...
Idea集成maven插件
学习目标 1.正确在idea上安装maven 2.安装后使用的基本操作 3.回顾安装步骤安装过程设置安装后自动下载功能 maven一键构建概念我们的项目,往往都要经历编译. 测试. 运行. 打包 ...
VS 2013+ ArcGIS 10.3 AddIn 断点不断异常解决
1. http://resources.arcgis.com/en/help/arcobjects-net/conceptualhelp/index.html#/How_to_debug_add_in ...

Vue实现移动端页面切换效果

Vue实现移动端页面切换效果的更多相关文章

随机推荐

热门专题