更新记录

1.0（2026-01-06） 下载此版本

tabs标签栏切换

平台兼容性

uni-app(4.02)

lilg-tabs 横向滚动标签栏

简介

• Vue3 <script setup> 语法，
• 支持微信小程序、H5、App
• 自动下划线、点击居中、自定义颜色/字号/宽度
• 直接复制即可使用，零依赖

使用示例

<template>
  <lilg-tabs
    :list="tabList"
    :activeIndex="current"
    :config="config"
    @change="onTabChange"
  />
</template>

<script setup>
import { ref } from 'vue';
const tabList = ref([{
        label: '地铁1号线',
        value: 1,
        badge:88
    },
    {
        label: '地铁2号线',
        value: 2
    },
    {
        label: '地铁3号线',
        value: 3
    },
    {
        label: '地铁4号线',
        value: 4
    },
    {
        label: '地铁5号线',
        value: 5
    },
    {
        label: '地铁6号线',
        value: 6
    }
]);
const activeIndex = ref(0)
const config = {
    fontSize: 8, // 字号（rpx）
    color: "#666", // 默认文字颜色
    activeColor: "#1e4892", // 激活文字颜色
    underLineHeight: 4, // 下划线高度（rpx）
    underLineColor: "#1e4892", // 下划线颜色
    showBadge: false, //是否显示徽标
};

// config 可配置可不配置 不配置使用默认的

function tabsChange(index) {
    activeIndex.value = index;
}
</script>

--------------------------------------------------
API 文档
--------------------------------------------------
```markdown
# API 参考

## Props

| 参数            | 类型                | 默认值       | 说明                                                                                |
|-------------  |-----------------  |--------   |------                                                                             |
| list          | `Array`           | `[]`      | 必填。支持两种格式：1. 字符串数组['A','B']2. 对象数组 `[{label:'A',value:1,badge:3}]`    |
| activeIndex   | `Number`          | `0`       | 当前激活索引，支持 `.sync` 或 `v-model`                                             |
| config        | `Object`          | `{}`      | 下方“Config 配置项”表格的任意字段                                                 |

## Events

| 事件名 | 参数 | 说明 |
|--------|------|------|
| change | `index` | 点击 tab 时触发，返回新索引 |

## Config 配置项

| 字段             | 类型     | 默认值     | 说明 |
|------------------|----------|------------|------|
| key              | String   | `"label"`  | 当 `list` 为对象数组时，读取的文本字段 |
| fontSize         | Number   | `26`       | 字号，单位 rpx |
| color            | String   | `"#666"`   | 默认文字颜色 |
| activeColor      | String   | `"#1e4892"`| 激活文字颜色 |
| itemWidth        | Number   | `0`        | 固定宽度（rpx）。`0` 代表均分 |
| underLineHeight  | Number   | `4`        | 下划线高度（rpx） |
| underLineWidth   | Number   | `0`        | 固定宽度（rpx）。`0` 代表自动（文字宽度 + 左右 padding） |
| underLinePadding | Number   | `10`       | 自动宽度模式下，文字与下划线左右间距（rpx） |
| underLineColor   | String   | `"#1e4892"`| 下划线颜色 |
| showBadge        | Boolean  | `false`    | 是否显示徽标 |