uniapp实战(一) -- 自定义导航栏

首先来看下导航栏结构,红色框叫状态栏,小程序和APP有，h5则没有，蓝色部件叫导航栏，绿色部分叫胶囊按钮，只有小程序有。

 修改配置

由于我们所有页面都使用自定义导航栏，所以直接在pages.json里改全局配置,navigationStyle改成custom就能使用自定义导航栏，否则会出默认导航栏，如果只想改某个页面，可以在pages的style里面设置

	"globalStyle": {
		"navigationStyle":"custom" //使用自定义导航栏
	},

新建navbar组件

在components文件夹下新建组件并创建同名目录，叫navbar/navbar.vue，这种components/组件名/组件名.vue的命名规则叫easyCom,然后父组件使用该子组件的时候不需要导入，可以直接使用。

代码解析

由于导航栏要固定在屏幕最上方，所以需要使用position: fixed,但使用fixed后内容会往上，所以还需要一个占位view,这就是的作用，接下来的关键是如何获取到状态栏高度和导航栏高度。

状态栏的话通过uni.getSystemInfoSync();就能拿到,h5和app的导航栏根据设计图来就行了，小程序比较特殊，他的导航栏是固定的，还有一个胶囊按钮，所以需要计算。计算公式是(胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) = 导航栏的高度

而导航栏的宽度就是menuButtonInfo.left