首页
所有分类
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 相关文章推荐
浮动的div自适应居中显示的js代码
Dec 23 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
Jan 31 Javascript
最短的IE判断var ie=!-[1,]分析
May 28 Javascript
基于jQuery实现下拉框
Nov 24 Javascript
AngularJS模块管理问题的非常规处理方法
Apr 29 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
Aug 12 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
Dec 14 Javascript
livereload工具实现前端可视化开发【推荐】
Dec 23 Javascript
JS实现读取xml内容并输出到div中的方法示例
Apr 19 Javascript
详解nuxt路由鉴权(express模板)
Nov 21 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
Apr 10 Javascript
Vue封装Axios请求和拦截器的步骤
Sep 16 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
铁拳(1) AGC(1) 绿林侠盗(1) 吸血鬼(1) 大话西游(1) 遗弃(1) 死亡搁浅(1) 模拟人生(1) 原神(1) 战锤40K(1)
You might like
PHP基础陷阱题(变量赋值)
2012/09/12 PHP
如何使用php输出时间格式
2013/08/31 PHP
php中的动态调用实例分析
2015/01/07 PHP
Linux系统下使用XHProf和XHGui分析PHP运行性能
2015/12/08 PHP
jquery中eq和get的区别与使用方法
2011/04/14 Javascript
javascript中强制执行toString()具体实现
2013/04/27 Javascript
js判断上传文件类型判断FileUpload文件类型代码
2014/05/20 Javascript
jQuery对象的length属性用法实例
2014/12/27 Javascript
jQuery中end()方法用法实例
2015/01/08 Javascript
JavaScript获得url所有参数键值表的方法
2015/03/21 Javascript
js实现文字在按钮上滚动的方法
2015/08/20 Javascript
微信小程序 地图（map）实例详解
2016/11/16 Javascript
基于rem的移动端响应式适配方案(详解)
2017/07/07 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
2017/09/12 Javascript
vue组件实现弹出框点击显示隐藏效果
2020/10/26 Javascript
关于Vue在ie10下空白页的debug小结
2018/05/02 Javascript
JavaScript实现的反序列化json字符串操作示例
2018/07/18 Javascript
详解Vue中watch的详细用法
2018/11/28 Javascript
js 根据对象数组中的属性进行排序实现代码
2019/09/12 Javascript
[43:35]TI4 循环赛第二日Liquid vs Fnatic
2014/07/11 DOTA
PyMongo安装使用笔记
2015/04/27 Python
Python使用matplotlib的pie函数绘制饼状图功能示例
2018/01/08 Python
Python3.6连接Oracle数据库的方法详解
2018/05/18 Python
python版本五子棋的实现代码
2018/12/11 Python
Pytorch 多块GPU的使用详解
2019/12/31 Python
CSS3 实现的火焰动画
2020/12/07 HTML / CSS
SKECHERS斯凯奇中国官网：来自美国的运动休闲品牌
2018/11/14 全球购物
Armor Lux法国官方网站：水手服装、成衣和内衣
2020/05/26 全球购物
党员自我批评与反省材料
2014/02/10 职场文书
大学生个人求职口试自我评价
2014/02/16 职场文书
初中班主任工作总结2015
2015/05/13 职场文书
同意报考证明
2015/06/17 职场文书
婚礼领导致辞大全
2015/07/28 职场文书
2016教师年度考核评语大全
2015/12/01 职场文书
创业计划书之网络外卖
2019/10/31 职场文书
js面向对象编程OOP及函数式编程FP区别
2022/07/07 Javascript