uniapp自定义微信导航条

自定义导航条

一、pages.json中代码

{	
	"globalStyle": {
			"navigationBarTextStyle": "#e74714",
			"navigationBarTitleText": "好运牛",
			"navigationBarBackgroundColor": "#00aa00",
			"enablePullDownRefresh":true,
			"backgroundColor": "#ff007f",
			// "usingComponents":{
			// 	"collapse-tree-item":"/components/collapse-tree-item"
			// },
			"renderingMode": "seperated", // 仅微信小程序，webrtc 无法正常时尝试强制关闭同层渲染
			// "pageOrientation": "portrait", //横屏配置，全局屏幕旋转设置(仅 APP/微信/QQ小程序)，支持 auto / portrait / landscape
			"rpxCalcMaxDeviceWidth": 960,
			"rpxCalcBaseDeviceWidth": 375,
			"rpxCalcIncludeWidth": 750
		},
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "好运牛",
					"navigationStyle":"custom"
				 // "navigationStyle": "custom"//代表自定义头部
			}
		},
		{
			"path": "pages/classification/classification",
			"style": {
				"navigationBarTitleText": "分类",
					"navigationStyle":"custom"
			}
		},
		{
			"path": "pages/shoppingcart/shoppingcart",
			"style": {
				"navigationBarTitleText": "购物车"
			}
		},
		{
			"path": "pages/my/my",
			"style": {
				"navigationBarTitleText": "我的"
			}
		}
	],
	"tabBar":{
		"custom":true,
		"color":"#8a8a8a",
		"selectedColor":"#198cfb",
		"borderStyle":"black",
		"backgroundColor":"#FFFFFF",
		"list":[
			 {
			        "pagePath": "pages/index/index",
			        "text": "首页"
			      },
			      {
			        "pagePath": "pages/classification/classification",
			        "text": "分类"
			      },
			      {
			        "pagePath": "pages/shoppingcart/shoppingcart",
			        "text": "购物车"
			      },
			      {
			        "pagePath": "pages/my/my",
			        "text": "我的"
			      }
		]
	}
}

二创建组件

<template>
	<view class="bar-sticky">
		<view class="status-line" :style="{height: lineHeight, background: navigationBarStyle.background || normal.background}">	
		</view>
		<view class="bar-line" :style="{background: navigationBarStyle.background || normal.background}">
			<view class="bar-line container-in" :style="{background: navigationBarStyle.background || normal.background}">
				<view class="bar-font bar-content" v-if="!custom">
					<view class="icon-fanhui bar-back" :style="{color: navigationBarStyle.iconColor || normal.iconColor}" @click="$turnPage('1', 'navigateBack')"
					 v-if="showBack">
						<uni-icons type="back" size="30" color="#f9f8f8"  ></uni-icons>
					</view>
					<view class="bar-title" :style="{color: navigationBarStyle.fontColor || normal.fontColor}">
						{{navigationBarStyle.iconText}}
					</view>
				</view>
				<view class="bar-font container-in" v-else>
					<slot></slot>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcons from '../../components/uni-icons/uni-icons.vue'
	export default {
		props: {
			custom: {
				type: Boolean,
				default: false
			}, //自定义头部，否则沿用原生的头部样式
			
			
			navigationBarStyle: {
				type: Object,
				default: function() {
					return {
						background: '#1d1515',
						fontColor: '#f5efef',
						iconColor: '#f5efef',
						iconText: '好运牛' //导航栏文字
					}
				}
			}, //原生头部自定义样式
			showBack: {
				type: Boolean,
				default: true
			}, //是否显示回退图标，默认显示
		},
		data() {
			return {
				normal: {
					background: '#FFFFFF',
					fontColor: '#000000',
					iconColor: '#000000',
				}, //公用样式,个性化样式可通过传值实现
				lineHeight: '' //状态栏高度
			};
		},
		components: {
			uniIcons:uniIcons
		},
		mounted() {
			  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			console.log("menuButtonInfo",menuButtonInfo)
			const systemInfo = uni.getSystemInfoSync();
			// px转换到rpx的比例
			let pxToRpxScale = 750 / systemInfo.windowWidth;
			let systems = {
				ktxStatusHeight: systemInfo.statusBarHeight * pxToRpxScale, // 状态栏的高度
				navigationHeight: 44 * pxToRpxScale, // 导航栏的高度
				ktxWindowWidth: systemInfo.windowWidth * pxToRpxScale, // window的宽度
				ktxWindowHeight: systemInfo.windowHeight * pxToRpxScale, // window的高度
				ktxScreentHeight: systemInfo.screenHeight * pxToRpxScale, // 屏幕的高度
			}
			// 底部tabBar的高度
			systems.tabBarHeight = systems.ktxScreentHeight - systems.ktxStatusHeight - systems.navigationHeight - systems.ktxWindowHeight // 底部tabBar的高度
			this.lineHeight = systems.ktxStatusHeight + 'rpx';
			this.$emit('getHeight', systems)
		}
	}
</script>

<style lang="less">
	.bar-content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	//导航栏吸顶效果
	.bar-sticky {
		position: sticky;
		position: -webkit-sticky;
		top: 0;
		z-index: 101;
	}

	/*垂直居中*/
	.container-in {
		display: flex;
		-webkit-align-items: center;
		align-items: center;
		width: 100%;
		height: 44px;
	}

	.bar-line {
		height: 44px; //导航栏高度

		.bar-back {
			font-size: 52rpx !important;
			position: absolute;
			left: 30rpx;
		}

		.bar-title {
			font-size: 32rpx;
		}
	}
</style>

三引用组件同时定义事件

<template>
	<view class="index">
		
		<mynav custom="false" showBack="false">
			<view class="title">
				<view class="left"  @click="gos"><uni-icons type="home" size="30" color="#f9f8f8"  ></uni-icons></view>
				<text class="texts" >好运牛</text>
			</view>
			
		</mynav>
		
			<view class="left" @click="gos"><uni-icons type="home" size="30" color="#ffaaff"  ></uni-icons></view>
		<mytab></mytab>
	
	</view>
</template>

<script>
	import mytab from '../../components/mytab/my-tab.vue'
	import mynav from '../../components/myNav/myNav.vue'
	import uniIcons from '../../components/uni-icons/uni-icons.vue'
	export default {
		data() {
			return {
				
			}
		},
		components: {
			mytab,
			mynav,
			uniIcons
		},
		onLoad() {

		},
		methods: {
		gos(){
			uni.switchTab({
				url:'/pages/index/index',
				success() {
					getApp().globalData.selected = 0
				}
			})
		}
		}
	}
</script>

<style lang="less">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between !important;
				color: #ffffff;
				position: relative;
				.left{
					margin-left: 10rpx;
					z-index: 2;
				}
				.texts{
					position: absolute;
					
					width: 100%;
					display: block;
					text-align: center;
				}
	}
	
</style>