更新记录

1.0.5（2025-12-16） 下载此版本

支持配置默认选中索引

1.0.4（2025-12-10） 下载此版本

增加多选类型

1.0.3（2025-12-09） 下载此版本

增加单选类型

平台兼容性

uni-app(4.66)

liaction-tabs - UniApp 标签页组件

📱 组件简介

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

✨ 特性亮点

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

🎛️ 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>

单选按钮模式

<liaction-tabs 
  type="radio"
  :tabs="tabs"
  tabActiveColor="red"
  tabDefaultColor="#f5f5f5"
  tabBorderRadius="20px"
  tabMargin="0 10px"
/>

<script>
export default {
  data() {
    return {
      tabs: [
        { name: '选项一' },
        { name: '选项二' },
        { name: '选项三' }
      ]
    };
  }
};
</script>

多选按钮模式

<liaction-tabs 
  type="checkbox"
  :tabs="tabs"
  v-model:activeIndex="activeTabs"
  tabActiveColor="#007bff"
  tabDefaultColor="#f0f0f0"
  tabBorderRadius="16px"
  tabMargin="0 8px"
  @change="handleChange"
/>

<script>
export default {
  data() {
    return {
      tabs: [
        { name: '选项一', id: 'opt1' },
        { name: '选项二', id: 'opt2' },
        { name: '选项三', id: 'opt3' },
        { name: '选项四', id: 'opt4' }
      ],
      activeTabs: [0, 2] // 初始选中第一个和第三个选项
    };
  },
  methods: {
    handleChange(e) {
      console.log('选中的标签索引:', e.selectedIndexes);
      console.log('选中的标签数据:', e.item);
    }
  }
};
</script>

默认索引配置 (defaultIndex)

1. 默认不选中任何项

<liaction-tabs 
  :tabs="tabs"
  :defaultIndex="-1"
  @change="handleChange"
/>

<script>
export default {
  data() {
    return {
      tabs: [
        { name: '首页' },
        { name: '分类' },
        { name: '消息' },
        { name: '购物车' }
      ]
    };
  },
  methods: {
    handleChange(e) {
      console.log('当前选中:', e.item ? e.item.name : '无');
    }
  }
};
</script>

2. 默认选中指定项

<liaction-tabs 
  :tabs="tabs"
  :defaultIndex="2" // 默认选中第三个标签（索引从0开始）
  @change="handleChange"
/>

3. 动态配置defaultIndex

<template>
  <view>
    <slider 
      :value="dynamicDefaultIndex" 
      min="-1" 
      max="3" 
      step="1" 
      show-value
      @change="updateDefaultIndex"
    />
    <liaction-tabs 
      :tabs="tabs"
      :defaultIndex="dynamicDefaultIndex"
      v-model:activeIndex="activeIndex"
      @change="handleChange"
    />
    <view class="result">
      当前选中: {{ activeIndex === -1 ? '无' : tabs[activeIndex]?.name }}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { name: '首页' },
        { name: '分类' },
        { name: '消息' },
        { name: '购物车' }
      ],
      dynamicDefaultIndex: 0,
      activeIndex: 0
    };
  },
  methods: {
    updateDefaultIndex(e) {
      this.dynamicDefaultIndex = e.detail.value;
      // 重置activeIndex触发defaultIndex生效
      this.activeIndex = -2;
      this.$nextTick(() => {
        this.activeIndex = this.dynamicDefaultIndex;
      });
    },
    handleChange(e) {
      console.log('当前选中:', e.item ? e.item.name : '无');
    }
  }
};
</script>

4. 无效defaultIndex自动回退

<liaction-tabs 
  :tabs="tabs"
  :defaultIndex="10" // 无效索引，自动回退到不选中状态
  @change="handleChange"
/>

📝 License

MIT

🤝 贡献指南

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