【Uni】自定义导航栏（仿微信）

uni相关的环境搭建就不在此赘言。

先上效果图：

自定义导航需要在程序根目录下的pages.json中进行配置

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {			
			}
		}
	],
    //全局页面样式
	"globalStyle": {
		// //导航栏标题颜色及状态栏字体颜色，仅支持 black/white
		"navigationBarTextStyle": "white",
		"app-plus": {
			//去掉原生导航栏
			 "titleNView": false  
		}

	}
}

导入阿里矢量图库

-》先在根目录下的static下面新建icon文件夹，之后将下载来的阿里矢量图库的代码文件拷贝进去。

-》在根目录下的main.js中引入

import Vue from 'vue'
import App from './App'
import './static/icon/iconfont.css'

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()

页面实现

路径pages-》index-》index.vue

<template>
	<view class="content">
		<!-- 上方显示时间 显示wifi的通栏 -->
		<view class="status_bar">
			<view class="top_view"></view>
		</view>
		<view class="nav">
			<view class="nav-title">Gecer</view>
			<view class="nav-contorls">
				<view class="iconfont icon-sousuo"></view>
				<view class="iconfont icon-tianjia" @click="isShowPop=!isShowPop"></view>
			</view>
			<view class="mune-pop" v-if="isShowPop">
				<view class="iconfont icon-tianjiahaoyou">
					添加好友
				</view>
				<view class="iconfont icon-daifukuan">
					收付款
				</view>
				<view class="iconfont icon-youjian">
					帮助与反馈
				</view>
			</view>
		</view>
		
		<view class="main">
			
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				isShowPop:false
			}
		},
		onLoad() {
			console.log('onLoad')
		},
		methods: {

		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	//上方手机状态栏 通栏
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #545454;
	}

	.top_view {
		height: var(--status-bar-height);
		width: 100%;
		position: fixed;
		background-color: #545454;
		top: 0;
		z-index: 999;
	}

	//导航
	.nav {
		position: relative;
		display: flex;
		width: 100%;
		height: 60px;
		justify-content: space-between;
		align-items: center;
		background: #EFEFEF;
	}

	.nav-title {
		margin-left: 10px;
		font-size: 20px;
		font-weight: bold;
	}

	//导航按钮
	.nav-contorls {
		display: flex;
	}

	.nav-contorls view:nth-child(1) {
		margin-right: 8px;
	}

	.nav-contorls view {
		padding: 10px;
		border-radius: 8px;
	}

	.nav-contorls view:active {
		background: #C0C0C0;
	}

	.nav-contorls {
		margin-right: 10px;
	}

	.nav-contorls .iconfont {
		font-size: 25px;
	}
	.mune-pop{
		position: absolute;
		top: 60px;
		right: 10px;
		width: 180px;
		
		background: #545454;
		margin-top: 5px;
		border-radius: 8px;
	}
	.mune-pop:after{
		position: absolute;
		top: -5px;
		right: 15px;
		content: '';
		height: 0;
		width: 0;
		border-bottom: 8px solid #545454;
		border-right: 9px solid transparent;
		border-left: 9px solid transparent;		
	}
	.mune-pop>view{
		color: white;
		font-size: 20px ;
		margin: 10px 0 10px 20px ;
		height: 40px;
		line-height: 40px;
		border-bottom: 1px solid #808080;
	}
	.mune-pop .iconfont:before{
		margin-right: 10px;
	}
</style>

这里需要注意 这个是uni自带的用于描述 程序上方状态栏（wifi、手机信号等）的标签

<view class="status_bar">
			<view class="top_view"></view>
		</view>

样式 

//上方手机状态栏 通栏
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #545454;
	}

	.top_view {
		height: var(--status-bar-height);
		width: 100%;
		position: fixed;
		background-color: #545454;
		top: 0;
		z-index: 999;
	}