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

原创 Fly丶 教程 vue专题 75阅读 13 天前 举报

在子页面把整个页面做绝对定位,覆盖整个屏幕,子父页面将 router-view 用 transition 套起来,并加上过渡动画就可以啦。

代码:

效果:

有一个问题需要注意一下,

我们知道,在应用transform属性的时候,fixed定位会变成absolute。

这里,页面转换的时候,就变成了相对translation定位。所以如果子页面中有绝对定位的话,移动的过程中页面会变形。

简单举个栗子,

看下效果:

OKOK,反正就是这种bug嘛。

解决办法就是,就是,尽量让页面fixed定位都是0 0 0 0,然后偏移用padding实现。

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

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

嗯嗯 还有一个问题,还有个滑动穿透的问题,(真开心! 这么多问题!

我再举个栗子,

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

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

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

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

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

最后

为了帮助大家让学习变得轻松、高效,给大家免费分享一大批资料,帮助大家在成为全栈工程师,乃至架构师的路上披荆斩棘。在这里给大家推荐一个前端全栈学习交流圈:866109386.欢迎大家进群交流讨论,学习交流,共同进步。

当真正开始学习的时候难免不知道从哪入手,导致效率低下影响继续学习的信心。

但最重要的是不知道哪些技术需要重点掌握,学习时频繁踩坑,最终浪费大量时间,所以有有效资源还是很有必要的。

最后祝福所有遇到瓶疾且不知道怎么办的前端程序员们,祝福大家在往后的工作与面试中一切顺利。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复