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

传送门1：https://blog.youkuaiyun.com/weixin_43343144/article/details/90300788

传送门2：https://blog.youkuaiyun.com/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 后进行调用。