文章来源于网络收集而来，版权归原创者所有，如有侵权请及时联系！

343.小结

发布于 2020-09-14 22:20:45 字数 2393 浏览 944 评论 0 收藏 0

app怎么添加底部tab

在views目录下创建一个组件（MainPage.vue），再使用vant的Tabbar 标签栏，代码如下：

&lt;van-tabbar :value=&quot;tabActive&quot;&gt;
&lt;van-tabbar-item name=&quot;home&quot; icon=&quot;home-o&quot; to=&quot;/main/home&quot;&gt;首页&lt;/van-tabbar-item&gt;
&lt;van-tabbar-item name=&quot;wait&quot; icon=&quot;friends-o&quot; to=&quot;/main/wait&quot;&gt;审批&lt;/van-tabbar-item&gt;
&lt;van-tabbar-item name=&quot;apply&quot; icon=&quot;user-o&quot; to=&quot;/main/apply&quot;&gt;流程&lt;/van-tabbar-item&gt;
&lt;van-tabbar-item name=&quot;personalHome&quot; icon=&quot;user-circle-o&quot; to=&quot;/main/personalHome&quot;&gt;个人中心&lt;/van-tabbar-item&gt;
&lt;/van-tabbar&gt;

其中value为绑定选中标签的索引值，通过修改value即可切换选中的标签，其中name属性，使value的值指向为当前标签的name，icon为每个标签配置的图标，to为跳转路径；

再将tabActive放在computed内，用来监听选中的标签；
```
tabActive(){
return this.$store.getters.pageActive
}
```
之后需在公共方法库（permission.js）内定义一个数组，使选中标签的颜色得到展示：

const main_tab_arr =['home','work','wait','apply','personalHome']

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

列表为空，暂无数据

343.小结

app怎么添加底部tab

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。