问题排查：切换页面时position_fixed会抖动
最后更新于
最后更新于
大家看这个浮动的容器哈
我在切换页面的一瞬间注意看
是不是抖一下
回来也是
那我们把动画放慢看一下
我先去到别的页面
好注意看
好暂停
我们来检查一下这元素
在这里
那他现在呢
是一个 position 等于 fixed
然后 top 等于 100px
我们都知道
fixed 是基于浏览器窗口来定位的
也就是说他这个100(px)
应该是基于浏览器顶端为100
那我们先把它改成0看一下
大家看现在这个0
他明显就不是浏览器的顶端
而是这个主区域的顶端
为什么会这样呢
我们来看一下 position fixed
他最后有一句话说
当元素祖先的这几个属性非空时
容器由适口改为该祖先
也就是说这个 fixed 元素
他的父极元素有任意一个
那几个属性不为空
他就会基于这个容器而定位
而不是浏览器窗口了
这回我们就不难理解
为什么他切换的时候会抖
因为在切换的过程中
他是有一个动画效果的
大家看
这个动画就是采用了 transform 来实现的
我们来验证一下
我们先把这个动画去掉
刷新
大家看
这回就不会抖了
那如果我们既想保留动画
还不想让他抖怎么办呢
我们可以这样想办法
让这个浮动的元素
从dom结构上
不要放在这个有动画的这个容器里
比如说我们放在body里
看一下代码
就这个我们想办法把它放在body里
那这种需求呢我们就可以考虑
封装一个公用的组件
比如我们希望这里这样写：in-body
然后呢in-body的里面的所有的元素
都会自动被放到body里边
好我们来写一下这个组件
首先呢我们在 components （目录）里创建一个文件
在这里我们就叫
InBody.vue
这里边很简单我们这样写
这些都不要
就保留一个
mountain 的
和
destroy 的
其他都不要了
然后 month 的里这样写
我们可以通过这个方法拿到
这个组件的dom节点
我们把它放到一个变量里
好然后呢我们把它放到body里
document.body.appendChild
把这个node传进来
然后呢 destroyed 的就很简单
我们就直接把它移除掉
no
点 remove
这就完事了
然后这块呢我们就定一个插槽就行了
很简单
这样这个组件就写完了
我们再把它注册到全局
因为他比较公用嘛
比如说我们在这写
import
InBody.vue
然后这也叫 InBody
然后把它 vue.component 注册到组件里
就叫 in body
好这样的话呢应该就能用了
我们来试一下刷新
切换回来
没有问题
浮动也没问题
以后呢这个项目里
如果再有其他内容需要放在body里
就直接用这个组件就可以了