h5之vue自定义底部导航栏
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了h5之vue自定义底部导航栏相关的知识，希望对你有一定的参考价值。
参考技术AItem.vue
Tabbar.vue
app.vue
react 自定义底部导航栏 Tabbar
参考技术A src下新建文件夹，component用于存放公共组件，page用于存放页面组件。res放一些静态资源。其中通过props传入子组件名字，图标 ，选中的样式、以及点击事件。也就是图下的一个小模块。
小贴士，定义id时，最好与图标未选中时的命名一致，这样方便处理。
- 循环过滤tabs, 根据每一项的id与current比较，选则图标和样式。
- 将过滤的结果渲染出来
- 子组件点击时，调用父组件的 itemNav 时间，达到切换的效果。
在头部引入样式
以上是关于h5之vue自定义底部导航栏的主要内容，如果未能解决你的问题，请参考以下文章