android 底部和导航栏重合_开发vue底部导航栏组件

这个想法源于最近自己在开发一个移动端博客的一个底部导航栏，原型设计如下：

我们来分析一下这个导航栏，其实很简单啦，就是自适应固定在底部 我们可以使用CSS3属性display:flex设置父级盒子为伸缩盒子模型，子元素设置flex:1自适应大小。
html布局如下

<

样式如下：

<

此间碰到一个路由嵌套问题

router.js配置

这个组件可以设置是iconfont图标样式，也可以使用图片 js逻辑如下：

<

接下来就是引用：

<

最终效果就是入下图：

作者：Ken_Coding
链接：https://juejin.im/post/5c4f0e28f265da61616f0e51
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。