uniapp自定义顶部导航组件

第一步 新建 components/uni-title/uni-title.vue组件

<!-- 自定义标题组件 -->
<template>
	<view class="container">
		<!-- 自定义顶部标题 -->
		<view class="head" :style="{ paddingTop: paddingTopNum + 'px' }">
			<!-- 标题插槽 -->
			<slot name="title"></slot>
		</view>
		<view :style="{ paddingTop: pageTopHeight + 'px' }">
			<!-- 内容插槽插槽 -->
			<slot name="content"></slot>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 导航区高度
			paddingTopNum: uni.getSystemInfoSync().statusBarHeight + 7,
			// 内容区高度
			pageTopHeight: uni.getSystemInfoSync().statusBarHeight + 30 + 7
		};
	}
};
</script>

<style scoped>
/* 自定义导航栏 */
.head {
	position: fixed;
	width: 100%;
	z-index: 999;
	height: 30px;
	line-height: 30px;
	color: #fff;
	font-size: 32rpx;
	/* 设置背景为透明色 */
	background-color: rgba(0,0,0,0);
	top: 0;
	left: 0;
}
</style>

第二步在pages.json中加入easycom配置

"easycom": { //组件化配置
		"autoscan": true, //是否开启自动扫描，开启后将会自动扫描符合components/组件名称/组件名称.vue目录结构的组件
		"custom": {
			// "uni-(.*)": "@/components/uni-$1.vue", // 匹配components目录内的vue文件
			"uni-(.*)": "@/components/uni-$1/uni-$1.vue", // 匹配components目录下组件名称/组件名称内的vue文件
			"vue-file-(.*)": "packageName/path/to/vue-file-$1.vue" // 匹配node_modules内的vue文件
		}
	}

第三步 在uniapp中使用

<template>
	<view class="container">
		<uni-title>
			<!-- 标题区域 -->
			<view slot="title" class="title">
				<uni-icons type="back" size="18" @click="back_page" color="#000"></uni-icons>
				<view>标题</view>
			</view>
			<!-- 内容区域 -->
			<view slot="content" class="income_content">
				
			</view>
		</uni-title>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		methods:{
			// 返回点击事件
			back_page(){
				uni.navigateBack({
				    delta: 1
				});
			}
		}
	}
</script>

<style>
page {
	width: 100%;
	height: 100%;
}
.title {
	padding: 0 10rpx;
	display: flex;
	align-items: center;
}
.title uni-icons {
	position: relative;
	left: 0;
}
/* #ifdef APP-PLUS */
.title > view {
	width: 100%;
	text-align: center;
	color: #000;
}
/* #endif */
/* #ifdef MP-WEIXIN */
.title > view {
	width: 100%;
	padding: 0 30rpx;
	color: #000;
}
/* #endif */
/* 内容部分 */
.income_content{
	height: 200rpx;
	border:5rpx solid #000;
	border-radius: 12rpx;
	margin: 0 auto;
}
</style>

项目结果查看

可以在uniapp和微信小程序中使用，切换不同的手机型号也相应不同增加或减少自定义标题栏的高度