引入组件

局部引入

// parent.vue
const FTabs = defineAsyncComponent(() => import('@/components/formaui/f-tabs/f-tabs.vue'))

基础用法

tabs属性：选项卡列表；v-model绑定当前选中索引

<f-tabs v-model="activeIndex" :tabs="tabs" @change="onChange" />

import { ref } from 'vue'

const activeIndex = ref(0)
const tabs = [
  { label: '今日特拼', value: '1' },
  { label: '全部', value: '2' },
  { label: '新品', value: '3' },
  { label: '品牌', value: '4' }
]

const onChange = (detail: { value: string | number; index: number }) => {
  console.log(detail)
}

滑块类型

sliderType属性：滑块类型（默认line），与 tui-tab 一致

可传入[line、block]。

<!-- 下划线（默认） -->
<f-tabs v-model="idx" :tabs="tabs" slider-type="line" />

<!-- 色块（默认左右留白 20rpx，可用 blockItemPadding 调整） -->
<f-tabs v-model="idx" :tabs="tabs" slider-type="block" />
<f-tabs v-model="idx" :tabs="tabs" slider-type="block" block-item-padding="8rpx" />
<f-tabs v-model="idx" :tabs="tabs" slider-type="block" block-item-padding="32rpx" />

block 自定义滑块颜色与选中文字色

<f-tabs
  v-model="idx"
  :tabs="tabs"
  slider-type="block"
  slider-height="56rpx"
  slider-bottom="12rpx"
  slider-bg-color="#E5FAFF"
  active-color="#11CDFC"
  slider-radius="32rpx" />

横向滚动

isScroll属性：选项过多时可横向滚动（默认false）

可与 block 组合使用。

<f-tabs v-model="idx" :tabs="scrollTabs" is-scroll />
<f-tabs v-model="idx" :tabs="scrollTabs" is-scroll slider-type="block" />

scrollItemGap属性：isScroll 时选项间距（默认32rpx）

<f-tabs v-model="idx" :tabs="scrollTabs" is-scroll scroll-item-gap="24rpx" />

选中态

isActiveBold属性：选中加粗（默认false）

<f-tabs v-model="idx" :tabs="tabs" is-active-bold />

activeScale属性：选中缩放比例（默认1）

<f-tabs v-model="idx" :tabs="tabs" :active-scale="1.15" is-active-bold />

activeColor / textColor / sliderBgColor

<f-tabs
  v-model="idx"
  :tabs="tabs"
  active-color="#07c160"
  slider-bg-color="#07c160"
  text-color="#999999"
  text-size="30rpx"
  is-active-bold />

borderRadius属性：外层圆角（默认0）

<f-tabs v-model="idx" :tabs="tabs" bg-color="#F7F8FA" border-radius="16rpx" />
<f-tabs v-model="idx" :tabs="tabs" slider-type="block" bg-color="#F7F8FA" border-radius="40rpx" />

blockItemBgColor属性：仅 sliderType=block 时有效；未选中项背景色，选中项为 transparent（默认transparent）

<f-tabs v-model="idx" :tabs="tabs" slider-type="block" block-item-bg-color="#F0F0F0" slider-bg-color="#E5FAFF" />

滑块样式

sliderWidth、sliderHeight、sliderRadius、sliderBottom

sliderType 为 block 时建议同步调整高度、底部间距与圆角。

<f-tabs
  v-model="idx"
  :tabs="tabs"
  slider-width="48rpx"
  slider-height="6rpx"
  slider-radius="6rpx"
  slider-bottom="8rpx" />

isSlider属性：是否显示滑块（默认true）

<f-tabs v-model="idx" :tabs="tabs" :is-slider="false" is-active-bold active-color="#15B3B3" />

isCustomSlider属性：自定义滑块（默认false）

开启后通过 customSlider 插槽自定义滑块内容。

<f-tabs v-model="idx" :tabs="tabs" is-custom-slider slider-height="8rpx">
  <template #customSlider>
    <view class="custom-slider"></view>
  </template>
</f-tabs>

.custom-slider {
  width: 40rpx;
  height: 8rpx;
  border-radius: 8rpx;
  background: linear-gradient(90deg, #15b3b3, #11cdfc);
}

角标与禁用

在 tabs 项上配置 showBadge、badgeNumber、isBadgeDot、disabled

const badgeTabs = [
  { label: '今日特拼', value: '1', showBadge: true, badgeNumber: 2 },
  { label: '即将开始', value: '2', showBadge: true, isBadgeDot: true },
  { label: '明日预告', value: '3' },
  { label: '禁用', value: '4', disabled: true }
]

<f-tabs v-model="idx" :tabs="badgeTabs" is-active-bold />

吸顶 / 固定

isSticky属性：粘性吸顶（默认false）；为 true 时 isFixed 失效

本项目 page 设置了 overflow-x: hidden，CSS position: sticky 无效，因此与 f-sticky 相同，需页面 onPageScroll 传入 scrollTop。无导航栏时可传 top="0"（H5 默认 44px）。

<f-tabs v-model="idx" :tabs="tabs" is-sticky :scroll-top="scrollTop" top="0" />

import { onPageScroll } from '@dcloudio/uni-app'
import { ref } from 'vue'

const scrollTop = ref(0)
onPageScroll((e) => {
  scrollTop.value = e.scrollTop
})

isFixed属性：固定在顶部（默认false）

配合 top、z-index 使用。

<f-tabs v-model="idx" :tabs="tabs" is-fixed top="0px" :z-index="996" />

图标选项

使用 icon / iconWidth / iconHeight 替代文字

const iconTabs = [
  { value: '1', icon: '/static/images/tab1.png', iconWidth: '48rpx', iconHeight: '48rpx' },
  { value: '2', icon: '/static/images/tab2.png', iconWidth: '48rpx', iconHeight: '48rpx' }
]

<f-tabs v-model="idx" :tabs="iconTabs" />

插槽

名称	说明
customSlider	自定义滑块（需开启 isCustomSlider）

属性

名称	类型	说明	默认值
v-model	number	当前选中项索引	0
tabs	FTabsItem[]	选项卡列表	-
isScroll	boolean	是否横向滚动	false
height	string	组件高度	80rpx
leftGap	string	组件左侧距离屏幕的间隙，校正滑块	0rpx
bgColor	string	背景颜色	#FFFFFF
borderRadius	string	外层圆角	0
activeColor	string	选中文字颜色	主题主色
isActiveBold	boolean	选中是否加粗	false
activeScale	number	选中缩放比例	1
textColor	string	未选中文字颜色	#666666
textSize	string	字体大小	28rpx
badgeColor	string	角标字体颜色	#FFFFFF
badgeSize	string	角标字体大小	22rpx
badgeBgColor	string	角标背景颜色	主题危险色
sliderType	FTabsSliderType	滑块类型，可传入[line、block]	line
blockItemPadding	string	block 文案左右留白；单值表示左右，也可传完整 padding	block 默认 20rpx
blockItemBgColor	string	block 未选中项背景色；选中为 transparent。仅 block 有效	transparent
scrollItemGap	string	isScroll 时选项间距	32rpx
isSlider	boolean	是否显示滑块	true
isSliderAnimate	boolean	滑块是否过渡动画	true
sliderWidth	string	滑块宽度（相对项宽）	100%
sliderHeight	string	滑块高度；block 默认 56rpx	line 2px / block 56rpx
sliderBottom	string	滑块底部间距；block 默认 12rpx	line 0 / block 12rpx
sliderBgColor	string	滑块背景色	主题主色
sliderRadius	string	滑块圆角；block 默认 32rpx	line 2px / block 32rpx
isCustomSlider	boolean	是否自定义滑块	false
isFixed	boolean	是否固定在顶部	false
isSticky	boolean	是否粘性吸顶；为 true 时 isFixed 失效，需配合 scrollTop	false
scrollTop	number	页面滚动距离（isSticky 时由 onPageScroll 传入）	-
top	string	顶部偏移（固定/吸顶时）	非 H5 0px / H5 44px
zIndex	number	自定义 z-index（固定/吸顶时）	996

FTabsSliderType

值	说明
line	底部下划线
block	跟手色块（贴合文案）

FTabsItem

名称	类型	说明	默认值
label	string	选项文字	-
value	string | number	选项值	-
icon	string	图片图标路径	-
iconWidth	string	图标宽度	-
iconHeight	string	图标高度	-
showBadge	boolean	是否显示角标	false
badgeNumber	number	角标数字	-
isBadgeDot	boolean	角标是否为圆点	false
disabled	boolean	是否禁用	false

事件

事件名	说明	回调参数
change	切换选项卡时触发	{ value: string | number; index: number }

方法

方法名	说明	传入参数
init	重新测量并定位滑块	-