更新记录

1.3.2（2026-10-13） 下载此版本

• 修复开启横向滚动（swipe-threshold）后标签「竖着排」的缺陷：H5 下 scroll-view 会在自身与插槽之间插入 display: block 的 .uni-scroll-view-content，此前把承载层（display: flex + tab flex: none）直接放在 scroll-view 上，tab 实际落进块级容器里逐个换行堆叠，scroll-x 完全失效。
• 改为：scroll-view 自身只负责宽度与 white-space: nowrap（新类 .vant-tabs__nav-scroll），滚动内容交由新增的内层 .vant-tabs__nav-wrap--scrollable 承载，并改用 display: inline-flex（行内级，宽度收缩到内容宽度），tab 才能横向排列并溢出触发滚动；scroll-into-view 对激活项的自动滚动同步恢复。
• 该结构同时兼容小程序端：scroll-view 的直接子节点即承载层，不再依赖 enable-flex。
• 演示页面同步调整：swipe-threshold 示例改用长标签名，使溢出与自动滚动可见（此前 8 个短标签总宽未超出容器，看不出滚动效果）。

平台兼容性

uni-app(3.8.5)

uni-app x(3.8.5)

其他

vant-tabs 标签页

标签页组件，由父组件 vant-tabs 与子组件 vant-tab 组合使用。支持 line / card 两种类型、滑动下划线、粘性定位与左右滑动切换；纯数据驱动 + 事件外抛，零业务耦合。

引入

<vant-tabs /> 与 <vant-tab /> 经 easycom 自动注册，无需 import。

代码演示

基础用法（line 类型）

<template>
  <vant-tabs v-model="active">
    <vant-tab title="标签一">内容一</vant-tab>
    <vant-tab title="标签二">内容二</vant-tab>
    <vant-tab title="标签三" disabled>内容三（禁用）</vant-tab>
  </vant-tabs>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const active = ref(0)
</script>

card 类型

<vant-tabs v-model="active" type="card" active-color="#ee0a24">
  <vant-tab title="首页">首页内容</vant-tab>
  <vant-tab title="分类">分类内容</vant-tab>
</vant-tabs>

指定 name（非索引值）

<vant-tabs v-model="activeName">
  <vant-tab title="A" name="a">AAA</vant-tab>
  <vant-tab title="B" name="b">BBB</vant-tab>
</vant-tabs>

横向滚动（多标签）

标签数量超过 swipe-threshold（默认 5）时，导航栏自动开启横向滚动，标签不再被压缩。支持 v-for 批量生成标签：

<vant-tabs v-model="active" :swipe-threshold="4">
  <vant-tab v-for="i in 10" :key="i" :title="`标签${i}`">内容{{ i }}</vant-tab>
</vant-tabs>

切换前拦截（before-change）

点击/滑动切换前执行 before-change，返回 false 或 reject 可阻止本次切换，适合未保存校验：

<vant-tabs v-model="active" :before-change="onBeforeChange">
  <vant-tab title="表单" name="form">表单内容（未保存禁止离开）</vant-tab>
  <vant-tab title="列表" name="list">列表内容</vant-tab>
</vant-tabs>

const onBeforeChange = (name: string | number) => {
  if (name === 'list' && hasUnsaved.value) {
    uni.showModal({ title: '提示', content: '有未保存内容，确定离开？' })
    return false // 或 return Promise<boolean>
  }
  return true
}

标题配色分离（title-active-color / title-inactive-color）

选中 / 未选中标签文字颜色可独立控制，优先于 activeColor / color，且不影响下划线颜色：

<vant-tabs
  v-model="active"
  active-color="#ee0a24"
  title-active-color="#ee0a24"
  title-inactive-color="#969799"
>
  <vant-tab title="首页">首页内容</vant-tab>
  <vant-tab title="分类">分类内容</vant-tab>
</vant-tabs>

徽标 / 红点

<vant-tabs v-model="active">
  <vant-tab title="消息" dot>消息列表</vant-tab>
  <vant-tab title="订单" badge="5">订单列表</vant-tab>
  <vant-tab title="购物车" badge="99+">购物车</vant-tab>
</vant-tabs>

自定义标题（title 插槽）

<vant-tabs v-model="active">
  <vant-tab title="默认标题">内容</vant-tab>
  <vant-tab>
    <template #title>
      <text style="margin-right: 4rpx">🔥</text>热门
    </template>
    热门内容
  </vant-tab>
</vant-tabs>

API

vant-tabs Props

vant-tab Props

Events

Slots

主题定制

• 文字色默认取 $uni-text-color，选中态取 $uni-color-primary，均可通过 color / activeColor 覆盖。
• 导航栏背景默认取 $uni-bg-color，可通过 background 覆盖（仅作用于标签栏，内容区保持页面底色）。

常见问题

• Q：禁用标签还能点吗？ A：不能。disabled 的 vant-tab 在导航栏不可点击，也不参与切换。
• Q：内容区如何只渲染当前项？ A：父组件通过 useSlots() 读取子节点元数据，仅渲染当前激活项的 default 插槽内容，零额外 DOM。
• Q：sticky 下内容不跟着滚？ A：吸顶只固定导航栏（position: sticky 作用于 .vant-tabs__nav），内容区随页面正常滚动；若页面顶部另有自定义导航栏，用 offset-top 留出距离。