更新记录

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

优化badge

1.0.1（2025-10-13） 下载此版本

bug修复

1.0.0（2025-09-24） 下载此版本

v1.0.0

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

平台兼容性

uni-app(4.66)

liaction-tabs - UniApp 标签页组件

📱 组件简介

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

✨ 特性亮点

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

🎛️ 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 来改进这个组件。