更新记录

1.0.0（2026-03-19） 下载此版本

初始版本发布

平台兼容性

uni-app(5.0)

uni-app x(5.0)

Carson Tabs 标签页组件

组件介绍

Carson Tabs 是一个功能强大的 uni-app x 标签页组件，支持自定义颜色、线条样式、标签间距等。

功能特点

• 支持双向绑定 v-model
• 支持自定义背景颜色
• 支持自定义激活/非激活颜色
• 支持自定义下划线宽度和高度
• 支持自定义标签间距
• 支持标签切换事件

安装方式

方式一：通过插件市场安装

在 HBuilderX 中打开插件市场，搜索 "carson-tabs"，点击安装即可。

方式二：手动导入

将插件文件夹复制到项目的 uni_modules 目录下。

引入组件

在页面中引入组件：

<script setup>
import carsonTabs from '@/uni_modules/carson-tabs/components/carson-tabs/carson-tabs.uvue';
</script>

基本用法

<template>
  <carson-tabs v-model="currentTab" :tabs="tabs" @change="handleTabChange" />
</template>

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

const currentTab = ref(0);
const tabs = ref(['标签1', '标签2', '标签3']);

function handleTabChange(index) {
  console.log('当前选中标签:', index);
}
</script>

属性说明

事件说明

示例代码

基本使用

<carson-tabs v-model="current" :tabs="['首页', '分类', '购物车', '我的']" />

自定义颜色

<carson-tabs 
  v-model="current" 
  :tabs="['标签1', '标签2', '标签3']"
  backgroundColor="#f5f5f5"
  activeColor="#ff0000"
  inactiveColor="#999999"
/>

自定义线条样式

<carson-tabs 
  v-model="current" 
  :tabs="['标签1', '标签2']"
  :lineWidth="60"
  :lineHeight="6"
  :tabMargin="30"
/>

监听切换事件

<carson-tabs 
  v-model="current" 
  :tabs="tabs"
  @change="onTabChange"
/>

<script setup>
function onTabChange(index) {
  console.log('切换到第', index, '个标签');
}
</script>

注意事项

• tabs 数组可以是字符串数组或对象数组
• 如果是对象数组，需要包含 name 属性
• 下划线会平滑过渡到选中标签下方

许可证

MIT License