uni-app 头部导航条改为背景图-Toy模板网

这篇具有很好参考价值的文章主要介绍了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 头部导航条改为背景图