场景:
有几个页面要加底部logo,由于每个页面的高度都不一样,加上底部后,底部在每个页面展示的位置都显示在不同的地方,有的偏上有的偏下。页面调试的换机型的时候也会有偏上偏下的情况。
如下图:
解决:
这时候可以通过设置z-index+position进行固定。
footer.vue 这里的底部主要是logo图片,移动端一定要测试切换不同机型的兼容展示情况。
其它需要显示这个logo作为底部的页面引入这个footer.vue组件即可。
footer.vue的主要内容,div包着一个logo图片
<div class="logo">
<van-image :src="logo" width="200">
</div>
下面是logo的样式设置,按照下面的样式设置后,页面调试切换了各种机型都是保持在底部,并且居中。
.logo{
bottom: 1rem;
z-index:1;
position: fixed;
width:100%;
text-align:center;
}