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实现移动端页面切换效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery Firefox3.5中操作select的问题
Jul 10 Javascript
JQuery实现用户名无刷新验证的小例子
Mar 22 Javascript
不要使用jQuery触发原生事件的方法
Mar 03 Javascript
JS Array.slice 截取数组的实现方法
Jan 02 Javascript
关于vue.js弹窗组件的知识点总结
Sep 11 Javascript
JS实现一个简单的日历
Feb 22 Javascript
Javascript中八种遍历方法的执行速度深度对比
Apr 25 Javascript
AngularJS 异步解决实现方法
Jun 12 Javascript
微信小程序自定义组件
Aug 16 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
highCharts提示框中显示当前时间的方法
Jan 18 Javascript
微信小程序 setData 对 data数据影响问题
Apr 18 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
You might like
php session应用实例 登录验证
2009/03/16 PHP
php中操作memcached缓存进行增删改查数据的实现代码
2014/08/15 PHP
thinkphp使用phpmailer发送邮件的方法
2014/11/24 PHP
php微信支付之APP支付方法
2015/03/04 PHP
使用JS取得焦点(focus)元素代码
2014/03/22 Javascript
js实现点击左右按钮轮播图片效果实例
2015/01/29 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
2015/04/02 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
2015/10/15 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
2015/10/29 Javascript
JQuery和HTML5 Canvas实现弹幕效果
2017/01/04 Javascript
AngularJS实现的简单拖拽功能示例
2018/01/02 Javascript
Router解决跨模块下的页面跳转示例
2018/01/11 Javascript
浅谈Vue响应式(数组变异方法)
2018/05/07 Javascript
微信小程序实现默认第一个选中变色效果
2018/07/17 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
2018/08/12 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
2018/08/17 Javascript
webpack@v4升级踩坑(小结)
2018/10/08 Javascript
javascript中this的用法实践分析
2019/07/29 Javascript
初学vue出现空格警告的原因及其解决方案
2019/10/31 Javascript
分享JS表单验证源码(带错误提示及密码等级)
2020/01/05 Javascript
原生小程序封装跑马灯效果
2020/10/21 Javascript
opencv python 傅里叶变换的使用
2018/07/21 Python
python:接口间数据传递与调用方法
2018/12/17 Python
django ListView的使用 ListView中获取url中的参数值方式
2020/03/27 Python
Python实现进度条和时间预估的示例代码
2020/06/02 Python
如何解决cmd运行python提示不是内部命令
2020/07/01 Python
CSS3媒体查询Media Queries基础学习教程
2016/02/29 HTML / CSS
Html5嵌入钉钉的实现示例
2020/06/04 HTML / CSS
Html5原生拖拽相关事件简介以及基础实现
2020/11/19 HTML / CSS
美国一家主打母婴用品的团购网站:zulily
2017/09/19 全球购物
食堂标语大全
2014/06/11 职场文书
网吧七夕活动策划方案
2014/08/31 职场文书
2014年接待工作总结
2014/11/26 职场文书
2015年秋季小学开学标语
2015/07/16 职场文书
区域销售大会开幕词
2016/03/04 职场文书
Mysql中存储引擎的区别及比较
2021/06/04 MySQL