uni-app 头部导航条改为背景图

将某一页面的导航条，改为背景图

1.在pages.json文件中将要修改的页面，style中的“navigationStyle”设置为custom，取消默认的原生导航栏

,{
            "path" : "pages/index1/index1",
            "style" :                                                                                    
            {
                "navigationStyle": "custom",
                "navigationBarTitleText": "页面1"
            }
            
        }

2.在要修改的页面中如index1页面

<template>
	<view>
		<image class="upper-bg" src="../../static/imageBg.png"></image>
		<view :style="{paddingTop:statusBar+'px'}">
			<text :style="{lineHeight:navbar+'px'}" class="textNavigation">个人中心</text>
		</view>
		<view>主体内容</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navbar:0,//状态栏高度
				statusBar:0,// 状态栏高度 + 导航栏高度  
				customBar:0,// 自定义标题与胶囊对齐高度

			};
		},
		mounted() {			
					uni.getSystemInfo({
					    success: (e) => {
					      this.statusBar = e.statusBarHeight
					      const custom = wx.getMenuButtonBoundingClientRect()
					      this.customBar = custom.bottom + custom.top - e.statusBarHeight
					      this.navbar = (custom.top - e.statusBarHeight) * 2 + custom.height
					
					    }
					})	
		}
	}
</script>

<style lang="scss">
	.textNavigation{
		color: white;
	}

</style>

效果如图

 

苹果手机导航条文字在中间位置，安卓手机导航条问题在靠左位置，更改某一页面，将会与其他页面的导航条文字位置对不上。

原生导航条不显示会有一些问题，详见官方文档uni-app官网，在原生导航能解决业务需求的情况下，尽量使用原生导航。甚至有时需要牺牲一些不是很重要的需求。