重构顶部导航栏组件，使用flex代替js计算

examples/hello-uniapp/pages/template/nav-bar/nav-bar.vue

@@ -4,17 +4,23 @@
 		<!-- 固定在顶部的导航栏 -->
 		<uni-nav-bar fixed="true" left-icon="back" @click-left="back" @click-right="showMenu" left-text="返回" right-text="菜单"
 		 title="导航栏组件"></uni-nav-bar>
-		<!-- 占位用的导航栏 -->
-		<uni-nav-bar background-color="rgba(0,0,0,0)" status-bar="true"></uni-nav-bar>
+		<!-- 使用非原生导航栏后需要在页面顶部占位 -->
+		<view style="height:80px;">...</view>
 		<!-- #endif -->
-		<view class="title">本导航栏为自定义组件，并非原生导航栏。除非原生导航栏无法满足需求，否则不推荐使用自定义导航栏组件。具体参考http://ask.dcloud.net.cn/article/34921</view>
-		<view class="title">基础用法(注意右上角应避开微信小程序自带的胶囊按钮)</view>
-		<uni-nav-bar left-icon="back" @click-left="back" title="标题"></uni-nav-bar>
-		<!-- <uni-nav-bar left-icon="camera" @click-left="clickLeft" @click-right="showMenu" right-icon="bars" title="标题"></uni-nav-bar>
-        <uni-nav-bar left-icon="back" @click-left="back" left-text="返回" title="标题"></uni-nav-bar>
-        <uni-nav-bar left-icon="back" @click-left="back" @click-right="showMenu" left-text="返回" right-text="菜单" title="标题"></uni-nav-bar>
-        <uni-nav-bar left-icon="back" @click-left="showMenu" @click-right="showMenu" left-text="菜单" right-text="菜单" title="标题"></uni-nav-bar> -->
-		<view class="title">其他常见样式</view>
+		<view class="uni-padding-wrap">
+			<view class="uni-helllo-text uni-common-mt">
+				本导航栏为自定义组件，并非原生导航栏。除非原生导航栏无法满足需求，否则不推荐使用自定义导航栏组件。具体参考http://ask.dcloud.net.cn/article/34921
+			</view>
+			<view class="uni-title uni-center uni-common-mt">
+				基础用法
+				<text>\n返回图标 + 标题</text>
+			</view>
+		</view>
+		<uni-nav-bar left-icon="back" left-text="返回" @click-left="back" title="标题"></uni-nav-bar>
+		<view class="uni-title uni-center uni-common-mt">
+			其他常见样式
+			<text>\n返回图标 + 搜索 + 右侧按钮</text>
+		</view>
 		<uni-nav-bar color="#333333" background-color="#FFFFFF" fixed="false" right-icon="scan" @click-left="showCity"
 		 @click-right="scan">
 			<block slot="left">
@@ -106,24 +112,29 @@
 		align-items: center;
 		justify-content: center;
 		width: 100%;
+		margin-left:8px;
 	}
 
 	.input-view {
-		position: absolute;
-		width: 100%;
-		top: 50%;
-		transform: translateY(-50%);
-		align-items: center;
+		width: 92%;
 		display: flex;
-		flex-direction: row;
 		background-color: #e7e7e7;
 		height: 30px;
 		border-radius: 15px;
-		padding: 0 10px;
+		padding: 0 4%;
+		flex-wrap:nowrap;
+		margin:7px 0;
+		line-height:30px;
+	}
+	
+	.input-view .uni-icon{
+		line-height:30px !important;
 	}
 
-	.input {
-		flex: 1;
-		padding: 0 5px;
+	.input-view .input {
+		height:20px;
+		line-height:20px;
+		width:94%;
+		padding: 5px 3%;
 	}
 </style>