Tabs 标签

该组件，是一个tabs标签组件，在标签多的时候，可以配置为左右滑动，标签少的时候，可以禁止滑动。 该组件的一个特点是配置为滚动模式时，激活的tab会自动移动到组件的中间位置。

平台差异说明

APP	H5	微信小程序	支付宝小程序	QQ小程序	···
√	√	√	√	√	适配中

代码示例

部分功能示例，具体可参考示例程序以及文档API。

基础用法

• 通过设置 scrollable (默认为 true)， 配置tabs组件的内容是否可以左右滑动，一般4个标签一下时，可以禁止滑动，设置为 false，5个标签以上，建议可以左右滑动，设置为 true。
• tabs标签的切换，需要绑定 current 值，在 change 事件回调中获取当前激活的标签索引 index，并其赋值给 current 值即可。

具体的标签，通过 list 属性配置，该属性要求为数组，元素为对象，对象默认要有 name 属性，如需更改name 属性，可通过 keyName 属性配置，示例：

<template>
    <fu-tabs :list="list" :current="current" keyName="name" :scrollable:="false" @change="handleChange"></fu-tabs>
</template>

<script setup>
    import { ref, reactive } from 'vue';

    // data数据
    const list = reactive([
        { name: '全部' },
        { name: '待发货' },
        { name: '待收货' },
        { name: '待评价' },
        { name: '已完成' }
    ]);
    let current = ref(0);

    // methods方法
    const handleChange = (index) => {
        current.value = index;
    };
</script>

手动配置激活的标签

可以通过 current 控制tabs当前的第几个处于激活状态

<fu-tabs ref="tabsRef" :list="list" :current="2"></fu-tabs>

控制tabs组件的宽度

有时候我们并不想让 fu-tabs 组件占满整个屏幕的宽度，如果有此需求，可以给 fu-tabs 外面嵌套一个view元素，控制这个view的宽度或者内外边距，view里面的 fu-tabs 组件 宽度也会相应的发生变化。

<view style="width: 500rpx;>
    <fu-tabs ref="tabsRef" :list="list" :current="2"></fu-tabs>
</view>

控制底部滑块的样式

• 通过 lineColor 控制颜色滑块颜色。
• 通过 lineWidth 控制滑块的长度。
• 通过 lineHeight 控制滑块高度。

<fu-tabs ref="tabsRef" :list="list" lineColor="red" lineWidth="10" lineHeight="20"></fu-tabs>

API

Tabs Props

属性名	说明	类型	默认值	可选值
list	标签数组，元素为对象，如[{name: '推荐'}]	Array	-	-
duration	动画时长，单位为ms	Number	300	-
activeStyle	菜单选中时的样式 (默认{ color: '#303133' })	String｜Object	-	-
inactiveStyle	菜单未选中时的样式 (默认{ color: '#606266' })	String｜Object	-	-
lineWidth	滑块的宽度	String｜Number	20	-
lineHeight	滑块的高度	String｜Number	3	-
lineColor	滑块的颜色	String	#2979ff	-
lineBgSize	滑块背景显示大小，当滑块背景设置为图片时使用（默认 cover）	String	cover	-
itemStyle	菜单item的样式 (默认{ height: '44px' })	String｜Object	-	-
padding	各个元素的内边距可在itemStyle设置 默认 '0 15px'	String	-	-
scrollable	是否可以左右滑动	Boolean	true	false
current	当前激活的标签索引	Number	0	-
keyName	标签对象的key名，默认是name	String	name	-

Tabs Events

事件名	说明	回调参数
change	标签改变时触发 index: 点击了第几个tab，索引从0开始	() => void
click	点击标签时触发 index: 点击了第几个tab，索引从0开始	() => void

Tabs Slots

插槽名	说明
left	自定义左侧
right	自定义右侧