vue2组件系列第四十四节:Tab 标签页

准备工作：

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

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

1. 在index.vue里添加一项

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

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

代码演示Tab标签页：

基础方法：

<van-tabs v-model="active">
 <van-tab title="标签1">内容1</van-tab>
 <van-tab title="标签2">内容2</van-tab>
 <van-tab title="标签3">内容3</van-tab>
 </van-tabs>
data() {
 return {
 active: 2
 }
 },

横向滚动：

当大于4个标签时，Tab是可以横向滚动的

<van-tabs v-model="active">
 <van-tab title="标签1">内容1</van-tab>
 <van-tab title="标签2">内容2</van-tab>
 <van-tab title="标签3">内容3</van-tab>
 <van-tab title="标签4">内容4</van-tab>
 <van-tab title="标签5">内容5</van-tab> 
 <van-tab title="标签6">内容6</van-tab>
 </van-tabs>

风格转换：

<van-tabs v-model="active" type="card">
 <van-tab title="标签1">内容1</van-tab>
 <van-tab title="标签2">内容2</van-tab>
 <van-tab title="标签3">内容3</van-tab>
 <van-tab title="标签4">内容4</van-tab>
 </van-tabs>

自定义标题：

<van-tabs v-model="active" type="card" sticky>
 <van-tab title="标签1">
 <div slot="title">
 <van-icon name="more-o" />标签1
 </div>
 </van-tab>
 <van-tab title="标签2">
 <div slot="title">
 <van-icon name="more-o" />标签2
 </div>
 </van-tab>
 </van-tabs>

设置slot为title，可以自定义标题。

Tab事件：

click：点击事件，点击标签时触发

change：当前激活的标签改变时触发

scroll：滚动时触发

以上事件都有两个参数，分别为index(标签索引值)，title(标题)

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

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