vue2组件系列第四十五节:Tabbar 标签栏

Tabbar标签栏一般在应用的下方。

准备工作：

1. 创建一个页面: Tabbar.vue
2. 在router.js里配置Tabbar页面的路由

{
 path: '/tabbar',
 name: 'tabbar',
 component: () => import('./views/Tabbar.vue')
 }

1. 在index.vue里添加一项

<a href="javascript:void(0)" @click="$router.push('/tabbar')">
 <van-col span="6" class="marb20">
 <van-icon name="pending-deliver" />
 <div>Tabbar</div>
 </van-col>
</a>

至今为止呢，我们的首页显示的样式子是这样滴?不知道不觉间我们已经学完了41个组件了！哇噢，为自己欢呼一下吧！如果想看更多的内容，欢迎关注我，每天都有更新哈。

代码演示Tabbar标签栏：

基础方法：

<van-tabbar v-model="active">
 <van-tabbar-item icon="home-o">标签</van-tabbar-item>
 <van-tabbar-item icon="search" dot>标签</van-tabbar-item>
 <van-tabbar-item icon="friends-o" info="5">标签</van-tabbar-item>
 <van-tabbar-item icon="setting-o" info="20">标签</van-tabbar-item>
</van-tabbar>

自定义图标：

<van-tabbar v-model="active">
 <van-tabbar-item icon="home-o">
 <span>自定义</span>
 <img 
 slot="icon"
 slot-scope="props"
 :src="props.active ? icon.active : icon.normal"
 >
 </van-tabbar-item>
 <van-tabbar-item icon="search" dot>标签</van-tabbar-item>
 <van-tabbar-item icon="friends-o" info="5">标签</van-tabbar-item>
 <van-tabbar-item icon="setting-o" info="20">标签</van-tabbar-item>
 </van-tabbar>
data() {
 return {
 active: 0,
 icon: {
 normal: require('../assets/01.png'),
 active: require('../assets/02.png')
 }
 }
 },

通过这个属性slot-scope="props"来传输是否当前状态是否为激活状态。因为每个图标都会有两种状态，一种是激活状态，一种是没有被激活状态，所以如果是自定义图标的话，需要准备两张图片。当然在引入图片时一定要加上require或者使用绝对路径，否则找不到图片地址。

自定义激活状态的颜色的话，需要active-color，设置成自己想要的颜色即可

到目前为止呢，Tabbar就演示完了！庆祝一下我们又学完一个组件啦！

今天就到这里啦。休息休息一会儿吧?明天继续加油噢！加油