Vant Tab 标签页
2020-10-31 14:22 更新
引入
import Vue from 'vue';
import { Tab, Tabs } from 'vant';
Vue.use(Tab);
Vue.use(Tabs);
代码演示
基础用法
通过v-model
绑定当前激活标签对应的索引值,默认情况下启用第一个标签
<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-tabs>
export default {
data() {
return {
active: 2
};
}
}
通过名称匹配
在标签指定name属性的情况下,v-model
的值为当前标签的name
<van-tabs v-model="activeName">
<van-tab title="标签 1" name="a">内容 1</van-tab>
<van-tab title="标签 2" name="b">内容 2</van-tab>
<van-tab title="标签 3" name="c">内容 3</van-tab>
</van-tabs>
export default {
data() {
return {
activeName: 'a'
};
}
}
标签栏滚动
标签数量超过 4 个时,标签栏可以在水平方向上滚动,切换时会自动将当前标签居中
<van-tabs>
<van-tab v-for="index in 8" :title="'标签 ' + index">
内容 {{ index }}
</van-tab>
</van-tabs>
禁用标签
设置disabled
属性即可禁用标签。如果需要监听禁用标签的点击事件,可以在van-tabs
上监听disabled
事件
<van-tabs @disabled="onClickDisabled">
<van-tab title="标签 1">内容 1</van-tab>
<van-tab title="标签 2" disabled>内容 2</van-tab>
<van-tab title="标签 3">内容 3</van-tab>
</van-tabs>
import { Toast } from 'vant';
export default {
methods: {
onClickDisabled(name, title) {
Toast(name + '已被禁用');
}
}
};
样式风格
Tab支持两种样式风格:line
和card
,默认为line样式,可以通过type
属性修改样式风格
<van-tabs type="card">
<van-tab title="标签 1">内容 1</van-tab>
<van-tab title="标签 2">内容 2</van-tab>
<van-tab title="标签 3">内容 3</van-tab>
</van-tabs>
点击事件
可以在van-tabs
上绑定click
事件,事件传参为标签对应的索引和标题
<van-tabs @click="onClick">
<van-tab title="标签 1">内容 1</van-tab>
<van-tab title="标签 2">内容 2</van-tab>
</van-tabs>
import { Toast } from 'vant';
export default {
methods: {
onClick(name, title) {
Toast(title);
}
}
};
粘性布局
通过sticky
属性可以开启粘性布局,粘性布局下,当 Tab 滚动到顶部时会自动吸顶
<van-tabs v-model="active" sticky>
<van-tab v-for="index in 4" :title="'选项 ' + index">
内容 {{ index }}
</van-tab>
</van-tabs>
自定义标签
通过 title
插槽可以自定义标签内容
<van-tabs v-model="active">
<van-tab v-for="index in 2">
<div slot="title">
<van-icon name="more-o" />选项
</div>
内容 {{ index }}
</van-tab>
</van-tabs>
切换动画
通过animated
属性可以开启切换标签内容时的转场动画
<van-tabs v-model="active" animated>
<van-tab v-for="index in 4" :title="'选项 ' + index">
内容 {{ index }}
</van-tab>
</van-tabs>
滑动切换
通过swipeable
属性可以开启滑动切换标签页
<van-tabs v-model="active" swipeable>
<van-tab v-for="index in 4" :title="'选项 ' + index">
内容 {{ index }}
</van-tab>
</van-tabs>
滚动导航
通过scrollspy
属性可以开启滚动导航模式,该模式下,内容将会平铺展示
<van-tabs v-model="active" scrollspy sticky>
<van-tab v-for="index in 8" :title="'选项 ' + index">
内容 {{ index }}
</van-tab>
</van-tabs>
API
Tabs Props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
v-model | 绑定当前选中标签的标识符 | number | string | 0
|
type | 样式风格类型,可选值为card
|
string | line
|
color | 标签主题色 | string | #ee0a24
|
background | 标签栏背景色 | string | white
|
duration | 动画时间,单位秒 | number | string | 0.3
|
line-width | 底部条宽度,默认单位px
|
number | string | auto
|
line-height | 底部条高度,默认单位px
|
number | string | 3px
|
animated | 是否开启切换标签内容时的转场动画 | boolean | false
|
border | 是否显示标签栏外边框,仅在type="line" 时有效 |
boolean | true
|
ellipsis | 是否省略过长的标题文字 | boolean | true
|
sticky | 是否使用粘性定位布局 | boolean | false
|
swipeable | 是否开启手势滑动切换 | boolean | false
|
lazy-render | 是否开启延迟渲染(首次切换到标签时才触发内容渲染) | boolean | true
|
scrollspy v2.3.0
|
是否开启滚动导航 | boolean | false
|
offset-top | 粘性定位布局下与顶部的最小距离,单位px
|
number | string | 0
|
swipe-threshold | 滚动阈值,标签数量超过阈值时开始横向滚动 | number | string | 4
|
title-active-color | 标题选中态颜色 | string | - |
title-inactive-color | 标题默认态颜色 | string | - |
Tab Props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
title | 标题 | string | - |
disabled | 是否禁用标签 | boolean | false
|
dot v2.3.0
|
是否在标题右上角显示小红点 | boolean | false
|
info v2.3.0
|
标题右上角徽标的内容 | number | string | - |
name v2.0.6
|
标签名称,作为匹配的标识符 | number | string | 标签的索引值 |
url v2.2.1
|
点击后跳转的链接地址 | string | - |
to v2.2.1
|
点击后跳转的目标路由对象,同 vue-router 的 to 属性
|
string | object | - |
replace v2.2.1
|
是否在跳转时替换当前页面历史 | boolean | false
|
title-style v2.2.14
|
自定义标题样式 | any | - |
Tabs Events
事件名 | 说明 | 回调参数 |
---|---|---|
click | 点击标签时触发 | name:标识符,title:标题 |
change | 当前激活的标签改变时触发 | name:标识符,title:标题 |
disabled | 点击被禁用的标签时触发 | name:标识符,title:标题 |
rendered v2.3.0
|
标签内容首次渲染时触发(仅在开启延迟渲染后触发) | name:标识符,title:标题 |
scroll | 滚动时触发,仅在 sticky 模式下生效 | { scrollTop: 距离顶部位置, isFixed: 是否吸顶 } |
Tabs 方法
通过 ref
可以获取到 Tabs
实例并调用实例方法,详见 组件实例方法
方法名 | 说明 | 参数 | 返回值 |
---|---|---|---|
resize | 外层元素大小变化后,可以调用此方法来触发重绘 | - | void |
Tabs Slots
名称 | 说明 |
---|---|
nav-left | 标题左侧内容 |
nav-right | 标题右侧内容 |
Tab Slots
名称 | 说明 |
---|---|
default | 标签页内容 |
title | 自定义标题,不支持动态渲染 |
实例演示
以上内容是否对您有帮助:
更多建议: