1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<template>
	<view class="">
		<view class="nav-box" :style="{'height':100+'px','background':bgColor, width: '100%',position: 'fixed'}">
			<!-- 自定义导航栏 -->
			<view class="status_bar" :style="{'height':statusBarHeight+'px'}">
				<!-- uni-ui这里是状态栏 -->
			</view>
			<!-- 胶囊位置信息 -->
			<view class="nav-main flex align-center justify-center" :style="{height: navBarHeight+'px'}">
				<!-- 				<view class="nav-main-back" @click="back" v-if="backIcon">
					<uni-icons type="back" size="26" color="#fff"></uni-icons>
				</view>
				<text class="nav-main-title">{{title}}</text> -->
			</view>
			<view class="">
				<slot>
				</slot>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		props: {
			bgColor: {
				type: String,
				default: "#F5F5F5"
			},
			backIcon: {
				type: Boolean,
				default: true
			},
			title: {
				type: String,
				default: "二维码仓储积分"
			}
		},
		data() {
			return {
				//总高度
				height: 0,
				//胶囊位置信息
				menuButtonRect: {},
				//状态栏的高度
				statusBarHeight: 0,
				//导航栏的高度
				navBarHeight: 0,

				list1: [{
						name: '为你推荐'
					},
					{
						name: '圈本圈'
					}
				],
			}
		},
		created() {
			// this.height = wx.getStorageSync('navBarHeight')
			this.getHeight();
		},
		methods: {
			//获取屏幕导航栏高度
			getHeight() {
				if (wx.canIUse('getMenuButtonBoundingClientRect')) {
					let sysInfo = wx.getSystemInfoSync(); //状态栏的高度
					this.statusBarHeight = sysInfo.statusBarHeight;
					// 胶囊位置信息
					let rect = wx.getMenuButtonBoundingClientRect();
					this.menuButtonRect = JSON.parse(JSON.stringify(rect));
					// 导航栏高度
					let navBarHeight = (rect.top - sysInfo.statusBarHeight) * 2 + rect.height;
					this.navBarHeight = navBarHeight;
					// 自定义导航栏的高度
					this.height = sysInfo.statusBarHeight + navBarHeight;
				} else {
					wx.showToast({
						title: '您的微信版本过低，界面可能会显示不正常',
						icon: 'none',
						duration: 4000
					});
				}
			},
			//返回
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.status_bar {
		// height: var(--status-bar-height);
		width: 100%;
		// background:#ff0;
	}

	.nav-main {
		position: relative;

		// background:#f00;
		.nav-main-back {
			position: absolute;
			left: 10rpx;
		}

		.nav-main-title {
			color: #fff;
			font-size: 16px;
		}
	}
</style>