【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

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

样式 

//上方手机状态栏 通栏
	.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;
	}