小程序底部菜单样式 第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()函数,则是用来初始化部分机型底部突出区域高度计算的。
此时页面菜单栏效果如下图: