uni-app头部导航组件开发（4.1）

Posted 2021-09-03 2019ab

消息页面头部导航栏开发

index.nvue页面

<template>
	<view class="bg-light">
		<!-- 状态栏 -->
		<view :style="'height:'+statusBarHeight+'px'"></view>
		<!-- 导航 -->
		<view class="w-100 flex align-center justify-between" style="height: 90rpx;">
			<!-- 左边 -->
			<view class="flex align-center">
				<!-- 标题 -->
				<text class="font-md ml-3">微信(100)</text>
			</view>
			<!-- 右边 -->
			<view class="flex align-center">
					<view class="flex align-center justify-center"
					hover-class="bg-hover-light"
					style="height: 90rpx;width: 90rpx;">
						<text class="iconfont font-md">&#xe6e3;</text>
					</view>
					<view class="flex align-center justify-center"
					hover-class="bg-hover-light"
					style="height: 90rpx;width: 90rpx;">
						<text class="iconfont font-md">&#xe682;</text>
					</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {
		},
		data() {
			return {
				statusBarHeight: 0,
			}
		},
		onLoad() {
			// 获取任务栏高度
			// #ifdef APP-PLUS-NVUE
			this.statusBarHeight = plus.navigator.getStatusbarHeight();
			// #endif
		},
		methods: {

		}
	}
</script>

<style>

</style>