首页
所有分类
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 相关文章推荐
JS 巧妙获取剪贴板数据 Excel数据的粘贴
Jul 09 Javascript
js取整数、取余数的方法
May 11 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
May 20 Javascript
javascript制作的滑动图片菜单
May 15 Javascript
JQuery实现的按钮倒计时效果
Dec 23 Javascript
封装好的javascript前端分页插件pagination
Jan 04 Javascript
利用JS轻松实现获取表单数据
Dec 06 Javascript
ionic 3.0+ 项目搭建运行环境的教程
Aug 09 Javascript
JS从非数组对象转数组的方法小结
Mar 26 Javascript
vue如何限制只能输入正负数及小数
Jul 04 Javascript
Axios取消重复请求的方法实例详解
Jun 15 Javascript
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
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
i7 6700(1) ipad(1) React(6) i5 10400(1) GTX1660(1) i5 9400(1) Tomcat(18) win11(40) 对讲机(1) win10(43)
You might like
让这部DC动画新作刷新你的认知
2020/03/03 欧美动漫
各种战术和打法的原创者
2020/03/04 星际争霸
php 文件上传系统手记
2009/10/26 PHP
Search File Contents PHP 搜索目录文本内容的代码
2010/02/21 PHP
基于simple_html_dom的使用小结
2013/07/01 PHP
摘自百度的图片轮换效果代码
2007/11/19 Javascript
数组方法解决JS字符串连接性能问题有争议
2011/01/12 Javascript
NodeJS的url截取模块url-extract的使用实例
2013/11/18 NodeJs
JavaScript中使用document.write向页面输出内容实例
2014/10/16 Javascript
Javascript基础教程之for循环
2015/01/18 Javascript
jQuery实现图片上传和裁剪插件Croppie
2015/11/29 Javascript
最丑的时钟效果！js canvas时钟制作方法
2016/08/15 Javascript
微信小程序 wx.uploadFile无法上传解决办法
2016/12/14 Javascript
xmlplus组件设计系列之下拉刷新（PullRefresh)（6）
2017/05/03 Javascript
使用SVG基本操作API的实例讲解
2017/09/14 Javascript
详解基于vue-cli配置移动端自适应
2018/01/13 Javascript
微信小程序实现星级评价效果
2018/12/28 Javascript
this在vue和小程序中的使用详解
2019/01/28 Javascript
小程序登录/注册页面设计的实现代码
2019/05/24 Javascript
Elasticsearch实现复合查询高亮结果功能
2019/09/10 Javascript
Vue防止白屏添加首屏动画的实例
2019/10/31 Javascript
jquery插件懒加载的示例
2020/10/24 jQuery
python实现12306抢票及自动邮件发送提醒付款功能
2018/03/08 Python
python的内存管理和垃圾回收机制详解
2019/05/18 Python
python调用支付宝支付接口流程
2019/08/15 Python
Python实现中值滤波去噪方式
2019/12/18 Python
浅析pandas随机排列与随机抽样
2021/01/22 Python
python urllib和urllib3知识点总结
2021/02/08 Python
世界各地的旅游、观光和活动：Isango!
2019/10/29 全球购物
Java如何支持I18N？
2016/10/31 面试题
党员群众路线自我剖析材料
2014/10/06 职场文书
2015国庆66周年宣传语
2015/07/14 职场文书
2015年环境监察工作总结
2015/07/23 职场文书
公司保密管理制度
2015/08/04 职场文书
歌咏比赛口号大全
2015/12/25 职场文书
《认识钟表》教学反思
2016/02/16 职场文书