更新记录

1.0.0（2025-09-24）

v1.0.0

• 初始版本发布
• 支持基础标签页
• 支持带徽章的标签页
• 支持自定义样式
• 支持自定义标签内容
• 支持非滚动模式布局
• 支持长文本徽章配置

平台兼容性

uni-app(4.66)

liaction-tabs - UniApp 标签页组件

📱 组件简介

liaction-tabs 是一款专为 UniApp 开发的高度可定制化标签页组件，提供了丰富的样式配置和交互效果，支持滚动和非滚动两种模式，以及完善的徽章系统。适用于各类需要标签切换功能的移动端页面。

✨ 特性亮点

• 双模式布局：支持滚动模式和非滚动模式，适应不同场景需求
• 高度可定制：提供丰富的样式参数，支持自定义颜色、尺寸、间距等
• 完善的徽章系统：支持圆点、数字、文本多种徽章类型，并可自定义位置
• 灵活的指示器：支持内容宽度和标签项宽度两种指示器样式
• 平滑动画效果：标签切换时提供平滑的滚动动画
• 响应式设计：适配不同尺寸的移动设备
• 自定义插槽：支持自定义标签内容展示

🚀 安装使用

1. 从插件市场导入（推荐）

在 UniApp 插件市场搜索 "liaction-tabs"，通过 HBuilderX 直接导入到您的项目的 uni_modules 目录中。

2. 手动安装

将组件包下载后，解压并放置到您项目的 uni_modules 目录下，确保目录结构为 uni_modules/liaction-tabs/。

3. 使用组件

在 uni_modules 模式下，无需手动导入组件，可直接在页面中使用：

<template>
  <view class="container">
    <liaction-tabs 
      :tabs="tabs" 
      :activeIndex="activeIndex" 
      @change="handleTabChange" 
    />
    <!-- 内容区域 -->
    <view class="content">
      <!-- 根据当前选中的标签显示不同内容 -->
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { name: '标签一' },
        { name: '标签二' },
        { name: '标签三' }
      ],
      activeIndex: 0
    };
  },
  methods: {
    handleTabChange(index) {
      this.activeIndex = index;
      // 处理标签切换逻辑
    }
  }
};
</script>

🎛️ Props 参数

基础配置

标签样式

指示器配置

滚动配置

非滚动模式布局

徽章配置

📢 事件

📚 使用示例

基础用法

<liaction-tabs 
  :tabs="tabs"
/>

<script>
export default {
  data() {
    return {
      tabs: [
        { name: '首页' },
        { name: '发现' },
        { name: '消息' },
        { name: '我的' }
      ],
    };
  },
  methods: {
  }
};
</script>

带badge的标签

<liaction-tabs 
  :tabs="tabs" 
  :showBadge="true" 
/>

<script>
export default {
  data() {
    return {
      tabs: [
        { name: '首页' },
        { name: '消息', badge: 9, badgeType: 'circle' },
        { name: '通知', badge: '99+', badgeType: 'circle' },
        { name: '活动', badge: true, badgeType: 'dot' }
      ]
    };
  }
};
</script>

自定义样式

<liaction-tabs 
  :tabs="tabs" 
  tabActiveColor="#ff6700" 
  tabDefaultColor="#999" 
  indicatorHeight="4px" 
  indicatorMarginTop="8px" 
  :tabStyle="{
    fontSize: '15px',
    fontWeight: '500'
  }"
/>

非滚动模式

<liaction-tabs 
  :tabs="tabs" 
  :scrollEnabled="false" 
  :tabFlex="true" 
  tabTextAlign="center"
/>

自定义标签内容

<liaction-tabs :tabs="tabs">
  <template #tab="{ item, index }">
    <view class="custom-tab-item">
      <image :src="item.icon" mode="aspectFit" class="tab-icon"></image>
      <text class="tab-text">{{ item.name }}</text>
    </view>
  </template>
</liaction-tabs>

<script>
export default {
  data() {
    return {
      tabs: [
        { name: '首页', icon: '/static/icons/1.png' },
        { name: '分类', icon: '/static/icons/2.png' },
        { name: '购物车', icon: '/static/icons/3.png' },
        { name: '我的', icon: '/static/icons/4.png' }
      ]
    };
  }
};
</script>

<style scoped>
.custom-tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 0;
}
.tab-icon {
  width: 22px;
  height: 22px;
  margin-bottom: 2px;
}
</style>

长文本徽章配置

<liaction-tabs 
  :tabs="tabs" 
  :showBadge="true" 
  :badgeLongTextRatio="1.5" 
/>

<script>
export default {
  data() {
    return {
      tabs: [
        { name: '标签一' },
        { name: '标签二', badge: '新活动', badgeType: 'circle' },
        { name: '标签三', badge: 999, badgeType: 'circle' }
      ]
    };
  }
};
</script>

🎨 效果预览

📝 License

MIT

🤝 贡献指南

欢迎提交 Issues 来改进这个组件。

📌 更新日志

v1.0.0

• 初始版本发布
• 支持基础标签页
• 支持带徽章的标签页
• 支持自定义样式
• 支持自定义标签内容
• 支持非滚动模式布局
• 支持长文本徽章配置