首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onNovember 13, 2018

在子页面把整个页面做绝对定位，覆盖整个屏幕，子父页面将 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实现移动端页面切换效果【推荐】

- Author -

wenr

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
用document.documentElement取代document.body的原因分析
Nov 12 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
Dec 19 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
Sep 04 Javascript
angularjs+bootstrap菜单的使用示例代码
Mar 07 Javascript
Vue.js实战之Vuex的入门教程
Apr 01 Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
May 28 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
Aug 03 Javascript
element-ui使用导航栏跳转路由的用法详解
Aug 22 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
Feb 18 Javascript
vueScroll实现移动端下拉刷新、上拉加载
Mar 22 Javascript
vue style width a href动态拼接问题的解决
Aug 07 Javascript
vue项目查看vue版本及cli版本的实现方式
Oct 24 Javascript
vue中slot（插槽）的介绍与使用
Nov 12 #Javascript
vuex的module模块用法示例
Nov 12 #Javascript
React手稿之 React-Saga的详解
Nov 12 #Javascript
基于游标的分页接口实现代码示例
Nov 12 #Javascript
React Hooks的深入理解与使用
Nov 12 #Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
Nov 12 #Javascript
jQuery 操作 HTML 元素和属性的方法
Nov 12 #jQuery
远程连接(2) 逻辑备份(1) sql模式(1) 全表扫描(1) 限流器(1) 索引树扫描(1) 轮询锁(1) 异步机制(1) into outfile(1) geoserver(1)
You might like
超神学院：鹤熙已踏入神圣领域，实力不比凯莎弱
2020/03/02 国漫
php获取中文拼音首字母类和函数分享
2014/04/24 PHP
php新浪微博登录接口用法实例
2014/12/23 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
Laravel获取所有的数据库表及结构的方法
2019/10/10 PHP
BOOM vs RR BO3 第一场2.13
2021/03/10 DOTA
Jquery 获得服务器控件值的方法小结
2010/05/11 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
2011/09/17 Javascript
火狐下table中创建form导致两个table之间出现空白
2013/09/02 Javascript
js生成验证码并直接在前端判断
2015/05/15 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
2016/11/17 Javascript
详解webpack异步加载业务模块
2017/06/23 Javascript
jQuery.Ajax()的data参数类型详解
2017/07/23 jQuery
vue组件中的数据传递方法
2018/05/14 Javascript
微信小程序本地存储实现每日签到、连续签到功能
2019/10/09 Javascript
解决$store.getters调用不执行的问题
2019/11/08 Javascript
[00:32]2018DOTA2亚洲邀请赛OpTic出场
2018/04/03 DOTA
安装ElasticSearch搜索工具并配置Python驱动的方法
2015/12/22 Python
Python绑定方法与非绑定方法详解
2017/08/18 Python
对pyqt5中QTabWidget的相关操作详解
2019/06/21 Python
Python Matplotlib 基于networkx画关系网络图
2019/07/10 Python
浅谈Python3 numpy.ptp()最大值与最小值的差
2019/08/24 Python
浅谈Django+Gunicorn+Nginx部署之路
2019/09/11 Python
开启Django博客的RSS功能的实现方法
2020/02/17 Python
Black Halo官方网站：购买连衣裙、礼服和连体裤
2018/06/13 全球购物
应聘收银员个人的求职信
2013/11/30 职场文书
房产销售经理职责
2013/12/20 职场文书
初中语文教学反思
2014/02/02 职场文书
护理专业求职信
2014/06/15 职场文书
庆祝国庆节标语
2014/10/09 职场文书
2014年学生党支部工作总结
2014/12/20 职场文书
最感人的道歉情书
2015/05/12 职场文书
整脏治乱工作简报
2015/07/21 职场文书
2015年度优秀员工获奖感言
2015/07/31 职场文书
MySQL中rank() over、dense_rank() over、row_number() over用法介绍
2022/03/23 MySQL
VMware虚拟机安装 Windows Server 2022的详细图文教程
2022/09/23 Servers