惨痛的uniapp 背景图片 踩坑….

  • Post author:
  • Post category:uniapp


传送门1:

https://blog.csdn.net/weixin_43343144/article/details/90300788

传送门2:

https://blog.csdn.net/pucker/article/details/90475788

这种可以使用本地图片设置背景

我的背景图上下都会留白无法全屏:

现在只找到了app上的解决方案:

布局使用 padding-top 替换 margin-top 把页面内容高度撑起来,这样上方的留白就解决。 H5 app 都可以。

下方留白使用动态计算页面最后一个元素距离底部的距离,动态 的加 上padding-bottom


补充: 最近发现以前写好的样式又出现了问题,为了使图片撑满,给容器设置一个样式,如下:


.page_body{


z-index: 1000;

position:absolute;

top:0;

left:0;

right: 0;

bottom: 0;

height:100%;

width:100%;

background-size: cover;

background-position: center center;


}

注意官方tips:

  • 使用

    uni.createSelectorQuery()

    需要在生命周期

    mounted

    后进行调用。



版权声明:本文为Coco_chun原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。