uni小程序自定义导航栏组件

html部分

<!-- 动态绑定行内样式，根据不同手机 的通知栏高度显示不同的高度 -->
	<view class="nav" :style="{paddingTop:phoneHeight + 'px'}">
		<image src="../../static/image/left.png" mode="" @click="returnBefore"></image>
		<view class="nav-word">{{title}}</view>
		<view class="kong"></view>
	</view>

js部分

		data() {
			return {
				phoneHeight: ''
			}
		},
		created() {
			//获取手机状态栏的高度
			this.phoneHeight = uni.getSystemInfoSync().statusBarHeight
		},
		props: [
			"title"
		],
		methods: {
			returnBefore() {
				uni.navigateBack({
					delta: 1
				})
			}
		}

css部分

	.nav{
		position: fixed;
		opacity: 1;
		top: 0;
		z-index: 999;
		width: 100%;
		height: 140rpx;
		line-height: 140rpx;
		display: flex;
		align-content: center;
		align-items: center;
		justify-content: space-between;
		background:linear-gradient(90deg,rgba(198,165,111,1),rgba(228,205,162,1));
		padding: 0 24rpx;
	}
	.nav image{
		width:20rpx;
		height:36rpx;
		/* padding-left: 24rpx; */
	}
	.kong{
		width:30rpx;
		height:36rpx;
	}
	.nav-word{
		font-size:36rpx;
		font-weight:bold;
		color:rgba(255,255,255,1);
		margin-left: 0;
	}