heyang

component/navbar.vue

@@ -0,0 +1,126 @@
+<template>
+	<view>
+		<view class="wx-head-mod" :style="{height:navHeight+'rpx'}">
+			<view class="wx-head-mod-nav" :style="{height:navigationBarHeight+'rpx',top:statusBarHeight+'rpx'}">
+				<view class="wx-head-mod-nav-content"
+					:style="{height:customHeight+'rpx',justifyContent:'left'}">
+					<!-- 文本区 -->
+					<view class="wx-head-mod-nav-content-mian"
+						:style="{lineHeight:customHeight + 'rpx'}">
+						{{title}}
+					</view>
+				</view>
+			</view>
+		</view>
+
+	
+	</view>
+</template>
+ 
+<script>
+	import {systemInfo} from '@/component/system-info.js'
+	export default {
+		name: "HeadView",
+		props: {
+			// 文本区内容
+			title:'',
+		},
+		data() {
+			return {
+				statusBarHeight: 0, //状态栏高度
+				navHeight: 0, //头部导航栏总体高度
+				navigationBarHeight:0, //导航栏高度
+				customHeight: 0, //胶囊高度
+				scaleFactor: 0, //比例系数
+				menubarLeft:0, //胶囊定位的左边left
+				windowWidth: 0
+			};
+		},
+		methods: {
+
+		},
+		created() {
+			/* 获取设备信息 */
+			const SystemInfomations = systemInfo()
+			/* 通用平台 */
+			this.statusBarHeight = SystemInfomations.statusBarHeight //状态栏高度
+			this.scaleFactor = SystemInfomations.scaleFactor //比例系数
+			this.windowWidth = SystemInfomations.windowWidth //当前设备的屏幕宽度
+			/* 微信小程序平台 */
+			// #ifdef MP-WEIXIN
+			this.navHeight = SystemInfomations.navHeight + SystemInfomations.statusBarHeight //头部导航栏总高度
+			this.navigationBarHeight = SystemInfomations.navHeight //头部导航栏高度
+			this.customHeight = SystemInfomations.menuButtonHeight //胶囊高度
+			this.menubarLeft = SystemInfomations.menuButtonLeft //胶囊左边界距离左上角的距离
+			// #endif
+		}
+	}
+</script>
+ 
+<style>
+
+	.wx-head-mod {
+		box-sizing: border-box;
+		width: 100%;
+		position: fixed;
+		top: 0;
+		left: 0;
+		background: #0183FA;
+		/* background: linear-gradient(-35deg, #613A19 0%, #6F4E2B 100%); */
+	}
+ 
+	.wx-head-mod-nav {
+		box-sizing: border-box;
+		width: 100%;
+		position: absolute;
+		left: 0;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+ 
+	}
+ 
+	.wx-head-mod-nav-content {
+		box-sizing: border-box;
+		width: 100%;
+		display: flex;
+		justify-content: left;
+		align-items: center;
+		position: relative;
+		padding-left: 30rpx;
+		box-sizing: border-box;
+		
+	}
+ 
+	/* 文本区 */
+	.wx-head-mod-nav-content-mian {
+		box-sizing: border-box;
+		height: 100%;
+		text-align: center;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		overflow: hidden;
+		color:#fff;
+		font-size:36rpx;
+	}
+ 
+	/* 返回按钮 */
+	.wx-head-mod-nav-content-back {
+		box-sizing: border-box;
+		width: 60rpx;
+		height: 100%;
+		/* background-color: aqua; */
+		position: absolute;
+		top: 0;
+		left: 32rpx;
+		display: flex;
+		align-items: center;
+		justify-content: left;
+	}
+ 
+	.wx-head-mod-nav-content-back-img {
+		box-sizing: border-box;
+	}
+ 
+	
+ </style>

component/system-info.js

@@ -0,0 +1,70 @@
+/**
+ * 此js文件管理关于当前设备的机型系统信息
+ */
+const systemInfo = function() {
+	/****************** 所有平台共有的系统信息 ********************/
+	// 设备系统信息
+	let systemInfomations = uni.getSystemInfoSync()
+	// 机型适配比例系数
+	let scaleFactor = 750 / systemInfomations.windowWidth
+	// 当前机型-屏幕高度
+	let windowHeight = systemInfomations.windowHeight * scaleFactor //rpx
+	// 当前机型-屏幕宽度
+	let windowWidth = systemInfomations.windowWidth * scaleFactor //rpx
+	// 状态栏高度
+	let statusBarHeight = (systemInfomations.statusBarHeight) * scaleFactor //rpx
+ 
+	// 导航栏高度  注意：此导航栏高度只针对微信小程序有效 其他平台如自定义导航栏请使用：状态栏高度+自定义文本高度
+	let navHeight = 0 //rpx
+	// console.log(windowHeight,'哈哈哈哈哈');
+	
+	/****************** 微信小程序头部胶囊信息 ********************/
+	// #ifdef MP-WEIXIN
+	const menuButtonInfo = wx.getMenuButtonBoundingClientRect()
+	// 胶囊高度
+	let menuButtonHeight = menuButtonInfo.height * scaleFactor //rpx
+	// 胶囊宽度
+	let menuButtonWidth = menuButtonInfo.width * scaleFactor //rpx
+	// 胶囊上边界的坐标
+	let menuButtonTop = menuButtonInfo.top * scaleFactor //rpx
+	// 胶囊右边界的坐标
+	let menuButtonRight = menuButtonInfo.right * scaleFactor //rpx
+	// 胶囊下边界的坐标
+	let menuButtonBottom = menuButtonInfo.bottom * scaleFactor //rpx
+	// 胶囊左边界的坐标
+	let menuButtonLeft = menuButtonInfo.left * scaleFactor //rpx
+ 
+	// 微信小程序中导航栏高度 = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
+	navHeight = menuButtonHeight + (menuButtonTop - statusBarHeight) * 2
+	// #endif
+ 
+ 
+	// #ifdef MP-WEIXIN
+	return {
+		scaleFactor,
+		windowHeight,
+		windowWidth,
+		statusBarHeight,
+		menuButtonHeight,
+		menuButtonWidth,
+		menuButtonTop,
+		menuButtonRight,
+		menuButtonBottom,
+		menuButtonLeft,
+		navHeight
+	}
+	// #endif
+ 
+	// #ifndef MP-WEIXIN
+	return {
+		scaleFactor,
+		windowHeight,
+		windowWidth,
+		statusBarHeight
+	}
+	// #endif
+}
+ 
+export {
+	systemInfo
+}