微信小程序自定义顶部导航栏封装

微信小程序自定义顶部导航栏封装

先在page.json中找到要自定义导航栏的页面，给"style"设置属性"navigationStyle":“custom”，设置后默认的导航栏就没有，我们就可以自定义了。

下面是我自己封装的一个导航栏，用的是uni-app。

<template> 	<view class="pageHead"> 		<view class="headContent"> 			<uni-icons v-if="backIcon" class="back" type="back" size="16" color="#0079FE" @click="backLastPage"></uni-icons> 			<text class="headTitle">{{title}}</text> 		</view> 	</view> </template>  <script> 	export default { 		props:{ 			title:{ 				type:String, 				default: '' 			}, 			backIcon: { 				type: Boolean, 				default: true 			} 		}, 		data(){ 			return { 				 			} 		}, 		methods:{ 			backLastPage(){ 				uni.navigateBack({ 					delta: 1 				}) 			} 		} 	} </script>  <style lang="less" scoped> 	.pageHead{ 		height: 166rpx; 		text-align: center; 	} 	.headContent{ 		height: 84rpx; 		width: 100%; 		padding-top: 82rpx; 		line-height: 84rpx; 		font-size: 28rpx; 		font-weight: 700; 		font-style: 微软雅黑 Bold; 		background-color: #FFFFFF; 		position: fixed; 		top: 0; 		z-index: 11; 		color: #333333; 		.back{ 			position: absolute; 			text-align: left; 			left: 30rpx; 		} 	} </style>