vue中手机端的tabbar是如何实现的,vuetabbar怎么设置

在做移动端应用的时候，底部导航tabbar是必不可少的。
在这里，我用的是vue移动端的ui框架：ydui。长得想当的好看，我很喜欢。

文档中是这么写的：

这里面，可以用icon，也可以用图片。当用到图片的时候，可能切换tabbar的激活样式就要自己来完成了。我自己就写了一个想当简单的代码。

我自己的tabbar文件：

<template> <yd-tabbar class="tabbars"> <yd-tabbar-item :title="item.title" :link="item.linkTo" v-for="(item,index) in tabbar" :key="index" :active="item.active" active-color="#ff524f"> <img slot="icon" :src="item.activeImg" v-if="item.active"> <img slot="icon" :src="item.normalImg" v-else> </yd-tabbar-item> </yd-tabbar></template><script type="text/javascript">export default { data() { return { tabbar: [ { title: "参与挑战", normalImg: "./static/images/icon_rl@2x2.png", activeImg: "./static/images/icon_rl@2x.png", linkTo: "/join", active: true }, { title: "排行榜", normalImg: "./static/images/icon_ph@2x2.png", activeImg: "./static/images/icon_ph@2x.png", linkTo: "/rank", active: false }, { title: "邀请好友", normalImg: "./static/images/icon_yq@2x2.png", activeImg: "./static/images/icon_yq@2x.png", linkTo: "/invite", active: false }, { title: "个人中心", normalImg: "./static/images/icon_gr@2x2.png", activeImg: "./static/images/icon_gr@2x.png", linkTo: "/mine", active: false } ] }; }, watch: { //根据路由变化来改变样式 $route: { handler: function(val, oldVal) { //得到新的地址和老的地址，得到新的地址时，找到data中的tabbar数据，然后将激活状态设置为true，然后再根据代码中的v-if来显示就行了 var tabbar = this.tabbar; for (var i = 0; i < tabbar.length; i++) { if (tabbar[i].linkTo == path) { tabbar[i].active = true; } else { tabbar[i].active = false; } } this.tabbar = tabbar; }, // 深度观察监听 deep: true } },};</script><style>.tabbars{ height: 50px !important;}</style>

我个人觉得我这个方法还是比较简单易懂的，不知道还有没有更简单的方法