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

Posted 2021-09-03 2019ab

这里将导航插件引入 index.nvue

<template>
	<view class="">
		<free-nav-bar :title="'微信（100）'">
			<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插件内容，其中free-nav-bar.vue引入了另外一个插件free-icon-button.vue（右上侧图标插件）

<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 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>
</template>

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

<style>

</style>

这里是free-icon-button.vue（右上侧图标插件）

<template>
	<view class="flex align-center justify-center" 
	hover-class="bg-hover-light" @click="$emit('click')"
	style="height: 90rpx;width: 90rpx;">
		<slot></slot>
	</view>
</template>

<script>
	export default {
		props: {
			icon: {
				type: String,
				default: ''
			},
		},
		mounted() {
			// #ifdef APP-PLUS-NVUE
			// 加载公共图标库
			const domModule = weex.requireModule('dom')
			domModule.addRule('fontFace', {
			    'fontFamily': "iconfont",
			    'src': "url('/static/font_1365296_2ijcbdrmsg.ttf')"
			});
			// #endif
		}
	}
</script>

<style>
</style>