标题和返回按钮计算胶囊位置来调整

components/navigation/navigation.vue

@@ -0,0 +1,77 @@
+<template>
+	<view class="header" :style="{top: height}">
+		<label class="back" @click="back()"></label>
+		<view class="title">{{title}}</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name:"navigation",
+		data() {
+			return {
+				height: 0,
+			};
+		},
+		props: {
+			title: {
+				type: String,
+				default: ''
+			}
+		},
+		created() {
+			this.getWXStatusHeight();
+		},
+		methods: {
+			getWXStatusHeight() {
+				//获取状态栏高度
+				const statusBarHeight = uni.getSystemInfoSync().statusBarHeight
+				//获取小程序胶囊信息
+				const menu = uni.getMenuButtonBoundingClientRect()
+				//导航栏高度 == （胶囊距顶部高度-状态栏高度） *2 +胶囊高度
+				const navBarHeightWechat = (menu.top - statusBarHeight) * 2 + menu.height
+				//头部整体高度 ==状态栏高度 + 导航栏高度
+				const headerHeight = statusBarHeight + navBarHeightWechat
+				//计算导航内容距离顶部高度= 状态栏高度/2
+				const topHeight = statusBarHeight / 2
+				this.height = headerHeight - (topHeight/2) +"rpx"
+		   },
+			back(){
+				uni.navigateBack({
+					delta:1,//返回层数，2则上上页
+				})
+			}
+		}
+	}
+</script>
+
+<style>
+.header {
+	position: relative;
+	z-index: 99;
+	top: 90rpx;
+	width: 100%;
+	height: 90rpx;
+	background-color: #bac6fc;
+}
+
+label.back {
+	display: inline-block;
+	position: relative;
+	top: 16rpx;
+	left: 4%;
+	padding-left: 1.25rem;
+	width: 60rpx;
+	height: 60rpx;
+	background: url(/static/images/icon_arb.png) no-repeat left center;
+	background-size: auto 60%;
+}
+
+.title {
+	margin: -54rpx 0 50rpx;
+	color: #333;
+	font-size: 36rpx;
+	font-weight: bold;
+	text-align: center;
+}
+</style>

subpkg/list/list.vue

@@ -1,9 +1,11 @@
 <template>
 	<view class="wrap">
 		<view class="stabar"></view>
-		<view class="secbar"> <label class="back" @click="back()"></label>
+		<!-- <view class="secbar" :style="{top:getWXStatusHeight()}"> 
-		<view class="title">场景演练</view>
+			<label class="back" @click="back()"></label>
-		</view>
+			<view class="title">场景演练</view>
+		</view> -->
+		<navigation title="场景演练"></navigation>
 		<view class="mainwrap3">
 		<!-- 轮播图 -->
 		<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
@@ -40,7 +42,9 @@
 </template>
 
 <script>
+	import navigation from "@/components/navigation/navigation.vue";
 	export default {
+		components: {navigation},
 		data() {
 			return {
 				queryObj:{
@@ -55,16 +59,15 @@
 				//轮播图数据列表
 				swiperList: [],
 				//场景数据列表
-				sceneList: []
+				sceneList: [],
 			};
 		},
 		onLoad(options) {
 			this.queryObj.isOpen = options.isOpen
 			this.getSwiperList();
-			this.getSceneList()
+			this.getSceneList();
 		},
 		methods: {
-			
 			async getSwiperList() {
 				const {
 					data: res