4个页面

components/NavBar.vue

@@ -1,8 +1,12 @@
 <template>
-	<view class="header">
-		<span @tap="goBack" class="iconfont icon_back">&#xe6db;</span>
-		<span class="page_name">{{title}}</span>
-		<span @tap="backHome" class="iconfont icon_home" :class="{'vhide': show1 === false}">&#xe69b;</span>
+	<view class="zd-row jcflexstart header">
+		<view class="zd-col-4">
+			<uni-icons @tap="goBack" type="back" size="26" color="#fff"></uni-icons>
+		</view>
+		<view class="zd-col-16 page_name">{{title}}</view>
+		<view v-if="searchActive" class="zd-col-4" style="text-align: right">
+			<uni-icons @tap="toSearch" type="search" size="26" color="#fff"></uni-icons>
+		</view>
 	</view>
 </template>
 
@@ -22,9 +26,9 @@
 				type: Boolean,
 				default: false
 			},
-			show1: {
+			searchActive: {
 				type: Boolean,
-				default: true
+				default: false
 			}
 		},
 		methods: {
@@ -39,10 +43,8 @@
 					})
 				}
 			},
-			backHome () {
-				uni.redirectTo({
-					url: '/pages/home/home'
-				})
+			toSearch () {
+				this.$emit('toSearch')
 			}
 		}
 	}
@@ -51,12 +53,12 @@
 <style lang="stylus">
 @import '@/common/style/mixin.styl';
 .header
-	_fj()
 	position fixed
-	_wh(100%, 72rpx)
+	_wh(100%, calc(var(--status-bar-height) + 72rpx))
+	// background: linear-gradient(to bottom, #ff6800 0%, #ff6400 100%)
 	background-color $red
 	z-index 200
-	padding 0 20rpx
+	padding var(--status-bar-height) 20rpx 0 
 .page_name
 	_font(32rpx, 32rpx, #fff,700,center)
 </style>