uniapp开发：微信小程序总结一

微信小程序之：头部导航栏自定义

在开发过程中首页的导航栏上需要显示搜索框，如下图所示：

这种情况自需要自定义头部导航。

1.在pages.json页面设置导航栏样式

"navigationStyle": "custom"

若只有单个页面需要，则设置在单个页面的style下设置，否则在globalStyle中全局设置。具体参考文档https://uniapp.dcloud.io/collocation/pages?id=globalstyle

2.把导航栏封装成组件方便在每个页面使用（navBar.vue）

（1）view部分

<template name="navBar">
	<view class='navbarBox' :style="'height: '+(status + navHeight)+'px'">
		<view class='navStatus' :style="'height: '+status+'px;'+containerStyle"></view>
		<view class='navbarInfo' :style="'height: '+navHeight+'px;'+containerStyle">
			<view class='back-icon' v-if="backIcon" @click='back'>
				<image class="pic" :src='backIcon'></image>
			</view>
			<view class='home-icon' v-if="homeIcon" @click='home'>
				<image class="pic" :src='homeIcon'></image>
			</view>
			<view class='nav-icon' v-if="titleImg">
				<image class="pic" :src='titleImg' :style='iconStyle'></image>
			</view>
			<view class="searchBox" v-if="titleSearch">
				<view class='nav-title1' v-if="titleText && !titleImg">
					<text class="txt" :style='textStyle'>{{titleText}}</text>
				</view>
				<view class='nav-search' @click="search">
					<text class="txt">搜索</text> 
					<text class="iconfont icon-search"></text>
				</view>
			</view>
			<view class='nav-title' v-if="titleText && !titleImg && !titleSearch">
				<text class="txt" :style='textStyle'>{{titleText}}</text>
			</view>
		</view>
	</view>
</template>

（2）css部分

	.navbarBox {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		.navbarInfo {
			position: relative;
			font-size: 0;
		}

		.back-icon,
		.home-icon {
			width: 28px;
			height: 100%;
			position: absolute;
			transform: translateY(-50%);
			top: 50%;
			display: flex;
		}

		.back-icon {
			left: 16px;
		}

		.home-icon {
			left: 44px
		}

		.back-icon .pic {
			width: 28px;
			height: 28px;
			margin: auto;
		}

		.home-icon .pic {
			width: 20px;
			height: 20px;
			margin: auto;
		}
		
		.searchBox{
			width: 66.6%;
			height: 100%;
			position: absolute;
			// transform: translate(-50%, 0);
			left: 0;
			top: 0;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.nav-title1{
				max-width: 40%;
				margin-left: 5%;
				display: inline-block;
				font-weight: bold;
				font-size: 0;
				.txt {
					width: 100%;
					display: inline-block;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
			.nav-search{
				width: 45%;
				height: 28px;
				font-size: 14px;
				line-height: 28px;
				border-radius: 28px;
				margin-left: 5%;
				background: #FFFFFF;
				text-align: center;
				color: #808080;
				.icon-search{
					font-size: 16px;
					margin-left: 2px;
				}
			}
		}
		
		.nav-title,
		.nav-icon {
			max-width: 33%;
			position: absolute;
			transform: translate(-50%, -50%);
			left: 50%;
			top: 50%;
			font-size: 0;
			font-weight: bold;

			.txt {
				width: 100%;
				display: inline-block;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}

（3）javaScript部分

	var app = getApp();
	var allData = app.globalData;
	export default {
		name: "navBar",
		//属性
		props: {
			titleSearch: {
				type: Boolean,
				default: false
			},
			background: {
				type: String,
				default: '#FF3366'
			},
			color: {
				type: String,
				default: '#ffffff'
			},
			titleText: {
				type: String,
				default: '导航栏'
			},
			titleImg: {
				type: String,
				default: ''
			},
			backIcon: {
				type: String,
				default: ''
			},
			homeIcon: {
				type: String,
				default: ''
			},
			fontSize: {
				type: Number,
				default: 16
			},
			iconHeight: {
				type: Number,
				default: 19
			},
			iconWidth: {
				type: Number,
				default: 58
			}
		},
		//组件生命周期
		created: function(e) {
			var that = this;
			that.setNavSize();
			that.setStyle();
		},
		data() {
			return {
				status: 0,
				navHeight: 0,
				containerStyle: '',
				textStyle: '',
				iconStyle: '',
			}
		},
		methods: {
			// 通过获取系统信息计算导航栏高度
			setNavSize: function() {
				var that = this;
				var sysinfo = uni.getSystemInfoSync();
				var statusHeight = sysinfo.statusBarHeight;
				var isiOS = sysinfo.system.indexOf('iOS') > -1;
				var navHeight;
				if (!isiOS) {
					navHeight = 48;
				} else {
					navHeight = 44;
				}
				that.status = statusHeight;
				that.navHeight = navHeight;
				allData.pHeight = that.status + that.navHeight;
			},
			setStyle: function() {
				var that = this,
					containerStyle, textStyle, iconStyle;
				containerStyle = [
					'background:' + that.background
				].join(';');
				textStyle = [
					'color:' + that.color,
					'font-size:' + that.fontSize + 'px'
				].join(';');
				iconStyle = [
					'width: ' + that.iconWidth + 'px',
					'height: ' + that.iconHeight + 'px'
				].join(';');
				that.containerStyle = containerStyle;
				that.textStyle = textStyle;
				that.iconStyle = iconStyle;
			},
			// 返回事件 
			back: function() {
				uni.navigateBack({
					delta: 1
				})
				this.$emit('back',{back: 1});
			},
			home: function() {
				this.$emit('home','home');
			},
			search: function() {
				this.$emit('search','search');
			}
		}
	}

3.引用navBar组件

1. 在pages.json中配置：

	"usingComponents": {
		"navBar": "/components/navBar/navBar"
	},

2. 在index.vue中使用

	//script
	import navBar from "@/components/navBar/navBar";
	//template
	<navBar v-if="isNavBar" :title-text="titleName" :title-search="true"  @search="search" back-icon="/static/back.png" @back="back"/>