小程序底部菜单样式 第1篇
为实现进入某个页面，菜单栏上显示对应栏目的高亮效果，这则需要在每个引入页面定义菜单栏时，添加相应属性告诉组件需要将哪个菜单项添加高亮。
在组件中定义对外属性，navId为navList中每项对应的id值。代码如下：
首页代码如下：
我的页面代码如下：
最后在custom-navigation组件的中，通过id判断哪个为高亮部分。代码如下：
当navId与相等时，追加active类选择器，实现高亮效果。
小程序底部菜单样式 第2篇
如上图可见，中间圆环，以及当底部有突出部分时出现的阴影，可以使用菜单容器进行覆盖，叠加在上层即可。
首先中增加fixed-nav-content类容器，用于渲染菜单栏内容的容器，代码如下：
然后中添加fixed-nav-content类选择器样式，代码如下：
最后页面中则呈现出一个完美的底部菜单栏轮廓了，如下图：
小程序底部菜单样式 第3篇
可以在增加菜单数据，在容器中渲染菜单列表数据。在类容器fixed-nav-content中，创建模拟table类容器用于渲染菜单内容。
对于菜单列表需要对每项进行平分宽度，可以使用flex布局，也可以使用table + table-cell模拟表格属性实现。这里使用后者，table中的cell设置width:1%时，所有列会平分是因为会默认添加一个隐匿的table布局，其布局方式为table-layout: auto，且每个单元格有自己的最小宽度。
代码如下：
代码如下：
代码如下：
注意：中initialHeight()函数，则是用来初始化部分机型底部突出区域高度计算的。
此时页面菜单栏效果如下图：