小程序顶部标题栏的背景图片设置

场景： 近日在开发小程序的时候就，接到一个需求boss 想把小程序顶部那部分弄成一个带有我们logo的背景图片。不想要小程序的那种默认标题栏。一度考究发现是可以实现的。
实际运行结果为：

实现步骤

• 知识点讲解：

修改 navigationStyle 字段，关于这个属性，以下是官方解释：
在uniapp中

使用微信小程序开发工具开发小程序时：官方解释

• 操作：

此处我修改的页面是首页index.vue，我需要index的导航部分为图片背景。
所以,以下就以index.vue为例。

1. 修改导航栏为自定义导航栏样式

修改需要配背景图片的页面路由的属性值，此处我修改的是index.vue的路由配置
在pages.json中找到你需要配置背景图片的路由，修改它style的属性，也就是自定义导航栏样式。改为custom即取消默认的原生导航栏。

代码如下

 "navigationStyle":"custom"

3. 然后打开index.vue文件（就是你修改了路由配置的文件）

因为取消了默认的原生导航栏，自定义导航栏，只保留右上角胶囊按钮和分享。所以文本的内容都会向上移动一定距离。
像这样：
此时在index.vue 文件最上面的内容设置为你想设置的图片，撑起页面即可，即可
代码如下：

<template>
	<view class="index_view">
		<view style="overflow: hidden;height: 250upx;">
			<image src="../../static/product/topbg.png" class="top_img">image>
		view>
		<text>这是一段文字text>
		<text>这是一段文字text>
		<text>这是一段文字text>
	view>
template>

运行结果：

以上就是全部步骤，希望对你有帮助。