小程序将背景图片全面铺满小程序页面

1.问题描述

现在需要开发一个页面，需要将歌曲专辑的图片装满整个页面，并且添加毛玻璃效果。但是正常编写image组件的话，效果如下图所示。可以看出上方仍然有空白部分，被导航栏挡住。

2.解决方案

2.1 navigationStyle的作用

navigationStyle 是微信小程序页面配置中的一个属性，用于指定页面的导航栏样式。

通过设置 navigationStyle 属性，可以改变小程序页面的导航栏样式，包括是否显示导航栏、导航栏的背景色、标题颜色等。它可以取以下几个值：

default（默认值）：页面使用小程序的默认导航栏样式，显示导航栏，并根据系统设置的样式进行渲染。

custom：页面使用自定义的导航栏样式，不显示系统默认导航栏。此时，你可以通过 navigationBar 相关的配置属性来自定义导航栏的样式。

通常情况下，当你希望页面的导航栏样式与小程序默认样式不同，或者需要自定义导航栏的样式时，可以将 navigationStyle 设置为 custom，然后通过设置 navigationBar 的相关属性来自定义导航栏的样式。

例如如下:

{
  "navigationStyle": "custom",
  "navigationBar": {
    "backgroundColor": "#ffffff",
    "textColor": "#000000",
    "titleText": "Custom Navigation Bar"
  }
}

navigationStyle 被设置为 custom，页面将使用自定义的导航栏样式。navigationBar 相关的配置属性用于指定导航栏的背景色、标题颜色和标题内容。你可以根据需求修改这些属性来自定义导航栏的样式。

2.2应用

根据上述文档，我们想要实现对应需求，仅仅需要更改开发页面的json配置文件，以及编写css样式即可

<!--pages/music-player/index.wxml-->
<!-- 1.背景 -->
<image class="bg-image" mode="aspectFill" src="{{currentSong.al.picUrl}}"></image>
<view class="bg-cover"></view>

/* pages/music-player/index.wxss */
.bg-image, .bg-cover {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}
.bg-cover {
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
}

最终显示的效果如下：