uni-app 4.4封装头部导航组件

Posted 2021-09-04 2019ab

index.nvue内容

<template>
	<view class="">
		<free-nav-bar :title="'微信（100）'" :fixed='true'>
			<template v-slot="title"></template>
		</free-nav-bar>
	</view>
</template> 

<script>
	import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
	export default {
		components: {
			freeNavBar
		},
		data() {
			return {
				
			}
		},
		onLoad() {
			
		},
		methods: {

		}
	}
</script>

<style>

</style>

free-nav-bar.vue内容

<template>
	<view>
		<view class="bg-light" :class="fixed?'fixed-top':''">
			<!-- 状态栏 -->
			<view :style="'height:'+statusBarHeight+'px;'"></view>
			<!-- 导航 -->
			<view class="w-100 flex align-center justify-between" style="height: 90rpx;">
				<!-- 左边 -->
				<view class="flex align-center">
					<!-- 标题 -->
					<text v-if="title" class="font-md ml-3">{{title}}</text>
				</view>
				<!-- 右边 -->
				<view class="flex align-center">
					<free-icon-button @click="btn1"><text class="iconfont font-md">&#xe6e3;</text></free-icon-button>
					<free-icon-button @click="btn2"><text class="iconfont font-md">&#xe682;</text></free-icon-button>
				</view>
				<!--\\ue6e3 \\ue682 -->
			</view>
		</view>

		<!-- 站位 -->
		<view v-if="fixed" :style="fixedStyle"></view>
	</view>
</template>

<script>
	import freeIconButton from './free-icon-button.vue';
	export default {
		components: {
			freeIconButton,
		},
		props: {
			title: {
				type: String,
				default: ''
			},
			fixed:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				statusBarHeight: 0,
				navBarHeight: 0,
			}
		},
		mounted() {
			// 获取任务栏高度
			// #ifdef APP-PLUS-NVUE
			this.statusBarHeight = plus.navigator.getStatusbarHeight()
			// #endif
			this.navBarHeight = this.statusBarHeight + uni.upx2px(90)
		},
		computed: {
			fixedStyle() {
				return `height:${this.navBarHeight}px`;
			}
		}
	}
</script>

<style>

</style>