自定义 Header头部

Uniapp–>头部Header返回的自定义抒写方式

为啥呢？页面多多，功能相同，就不用重复写嘛~

创建common目录

在最外面新建一个common目录，用于不同个页面需要相同样式的组件，如tabbar，头部等（如果已经有common目录就不用建）

新建页面my-header/my-header.vue作组件

1，.status-bar盒子，用于拉开每个手机的状态栏（一般64rpx）；
2，.nav_top盒子，fixed是浮在上部的，所以有第3点。
3，.marginBox盒子，用于每次导入组件时，内容不会被遮挡（不用再设置头部高度）；

4，slot插槽，子组件提供一个地方（可以包含内容，形成默认内容），父组件负责填（会覆盖子组件默认内容）

<template>
	<view class="headers">
		<view class="nav_top">
			<view class="status-bar"></view>
			<view class="topContent">
				<view class="goBack">
					<slot name="left">
						<image src="图标" mode=""></image>
					</slot>
				</view>
				<view class="title">
					<slot name="center">
						<view>文字</view>
					</slot>
				</view>
			</view>
		</view>
		<view class="marginBox"></view>
	</view>
</template>
<style scoped>
	.nav_top{
		width: 100vw;
		height: 115rpx;
		background-color: white;
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		z-index: 900;
	}
	.status-bar{
		height: 64rpx;  /*固定的*/
	}
	.topContent{
		width: 100vw;
		height: 100rpx;
		display: flex;
		align-items: center;
	}
	.goBack{
		width: 90rpx;
		height: 42rpx;
		padding-left: 20rpx;
		box-sizing: border-box;
		position: relative;
		font-size: 24rpx;
	}
	.goBack image{
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		width: 40rpx;
		height: 42rpx;
	}
	.title{
		line-height: 115rpx;
		font-size: 32rpx;
		text-align: center;
		color: #344356;
	}
	.marginBox{
		height: 115rpx;
	}
</style>

在pages.json中添加/修改内容

“navigationStyle”:”custom”, //开启自定义头部样式

{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页",
				"navigationStyle":"custom",  //开启自定义样式
				"app-plus":{  //h5端跟app端执行 
					"scrollIndicator":"none", //隐藏滚动条
					"titleNView":"none" //隐藏头部视图
				}
			}
		},

导入组件与父子传值

1，需要的页面里导入相应组件并注册；
2.父是被导入组件的页面，子是导入的页面MyHeader
3，父组件不用提供属性给子，所以观察子组件的属性。
4，由于有些页面，不需要头部的一些样式，可以用v-if=”属性名”传布尔值（默认是true），去掉样式。
5，子–插值语法里定义个’名字’–> 父—名字=”内容”,如果是<>里面的属性–>:属性名=”属性值”（个人记住思路，见谅）
6，props接收父传来的值，并规定传来啥类型的值。（如果你知道传来的值是同类型，可以不用）

7，跳转回上一个页面。

//子
<template>
	<view class="headers">
		<view class="nav_top">
			<view class="status-bar"></view>
			<view class="topContent">
				<view class="goBack" @click="goTo" v-if="isBack">
					<slot name="left">
						<image src="../../static/imgs/arrow.png" mode=""></image>
					</slot>
				</view>
				<view class="title">
					<slot name="center">
						<view>{{title}}</view>
					</slot>
				</view>
			</view>
		</view>
		<view class="marginBox"></view>
	</view>
</template>

<script>
	export default{
		props:{
			title:{
				type:String,
				default:''
			},
			isBack:{
				type:Boolean,
				default:true
			}
		},
		methods:{
			goTo(){
				uni.navigateBack({  
					delta:1
				})
			}
		}
	}
</script>

//父
<template>
	<view class="">
		<MyHeader :isBack="false" title="内容"></MyHeader>
	</view>
</template>

<script>
	import MyHeader from '@/common/my-header/my-header.vue'
	export default {
		data() {
			return {
			}
		},
		components: {
			MyHeader
		}
	}
</script>