更新记录

1.0.3（2025-10-11） 下载此版本

更新组件入参文档

1.0.2（2025-10-11） 下载此版本

修复圆角下下划线位置错误

1.0.1（2025-09-27） 下载此版本

修复readmine文档

平台兼容性

uni-app(3.6.12)

uni-app x(3.6.10)

其他

Tabs 标签组件使用文档

组件介绍

Tabs 标签组件是一款适配 uni-app 多端（H5、微信小程序、App 及 NVUE 环境）的高性能标签切换组件。支持标签横向滚动、下划线平滑动画、内置徽章（Badge）等核心功能，可根据标签数量自动适配固定或滚动布局，激活标签自动居中，满足移动端常见业务场景（如分类切换、页面导航等）。

核心特性

• ✅ 多端兼容：无缝适配 H5、微信小程序、App（含 NVUE），动画效果自动适配平台特性
• ✅ 内置 Badge：支持数字显示、红点模式、自定义颜色 / 形状，无需依赖外部组件
• ✅ 灵活配置：标签样式、下划线样式、滚动模式均可自定义，满足多样化设计需求
• ✅ 性能优化：采用 DOM 尺寸缓存机制，减少重复查询，切换流畅无卡顿
• ✅ 完整状态：支持标签禁用、点击 / 长按事件、激活状态双向同步

快速上手

<template>
  <view class="page-container">
    <!-- Tabs 组件 -->
    <tian-tabs>
      :list="tabsList" 
      :current="activeTab" 
      @change="handleTabChange"
      lineColor="#4cd964"
    />

    <!-- 内容区域（根据标签切换显示） -->
    <view class="content">
      {{ tabsList[activeTab].name }} 页面内容
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 0, // 当前激活标签索引
      tabsList: [ // 标签数据源
        { name: '推荐', badge: { value: 5 } }, // 带数字徽章
        { name: '热点', badge: { isDot: true } }, // 带红点徽章
        { name: '财经', badge: { value: 102, max: 99, type: 'warning' } }, // 数字超出显示 99+
        { name: '科技', disabled: true }, // 禁用标签
        { name: '体育', badge: { value: 0, showZero: true, type: 'success' } } // 显示 0 值
      ]
    };
  },
  methods: {
    // 标签切换事件
    handleTabChange(index) {
      this.activeTab = index;
      console.log('切换到标签：', this.tabsList[index].name);
    }
  }
};
</script>

<style scoped>
.page-container {
  padding-top: 20px;
}
.content {
  padding: 20px;
  font-size: 16px;
}
</style>

组件 API 详解

1. Props（属性配置）

2. list 数据格式

list 为标签数组，每项对象支持字段：

3. badge 配置（内置徽章）

4. Events（事件）

5. Slots（插槽）

高级用法示例

1. 禁用标签 + 自定义下划线样式

   <tian-tabs>
   :list="[
   { name: '全部订单' },
   { name: '已完成' },
   { name: '待付款', disabled: true }, // 禁用标签
   { name: '已取消' }
   ]"
   lineWidth="30"        // 下划线宽度 30px
   lineHeight="4"        // 下划线高度 4px
   lineColor="#4cd964"   // 绿色下划线
   :activeTextStyle="{ color: '#4cd964', fontSize: '16px', fontWeight: 'bold' }" // 激活文本样式
   :tabItemStyle="{ padding: '0 16px', height: '50px' }" // 标签项高度 50px
   />

2. 反向模式徽章 + 方形形状

   <tian-tabs>
   :list="[
   { 
     name: '消息中心', 
     badge: { 
       value: '99+', 
       shape: 'square',    // 方形徽章
       inverted: true,     // 反向模式（透明背景+边框）
       type: 'info',       // 灰色边框
       color: '#86909c'    // 边框颜色
     } 
   },
   { 
     name: '通知', 
     badge: { 
       isDot: true,        // 红点模式
       color: '#ff7d00'    // 橙色红点
     } 
   }
   ]"
   />

3. 固定标签布局（不滚动） 当标签数量较少（如 3 个以内）时，可设置 scrollable: false 让标签平均分配容器宽度：

   <tian-tabs>
   :list="[
   { name: '首页' },
   { name: '分类' },
   { name: '我的' }
   ]"
   :scrollable="false" // 固定布局，不滚动
   :tabItemStyle="{ padding: '0 8px' }" // 减小内边距，避免文本换行
   />

4. 结合插槽实现左右功能按钮

   
   <tian-tabs>
   :list="[
   { name: '推荐' },
   { name: '热点' },
   { name: '财经' },
   { name: '科技' }
   ]"
   :current="activeTab"
   @change="handleTabChange"
   >
   <!-- 左侧插槽：返回按钮 -->
   <template #left>
   <view class="back-btn" @tap="handleBack">
     <uni-icons type="left" size="22" color="#666"></uni-icons>
   </view>
   </template>
   
   <!-- 右侧插槽：搜索 + 更多按钮 -->
   <template #right>
   <view class="right-tools">
     <uni-icons type="search" size="22" color="#666" style="margin-right: 16px;"></uni-icons>
     <uni-icons type="more-filled" size="22" color="#666"></uni-icons>
   </view>
   </template>
   </Tabs>