更新记录

1.2.0（2025-03-10） 下载此版本

• 优化图标显示逻辑，支持设置不同状态的图标
• 移除 showIcon 属性，改为判断是否有 icon 属性
• 移除 circleText 属性，改为从 subTabs 的 icon_text 属性获取
• 支持为每个下拉菜单的第一个子标签设置不同的圆形图标文字

1.1.0（2025-03-10） 下载此版本

• 优化组件结构，支持任意主标签拥有子标签
• 支持任意主标签显示下拉菜单和图标
• 统一事件回调机制，使用tab-click事件替代原来的main-tab-click和sub-tab-select事件
• 改进下拉菜单位置计算逻辑，根据主标签位置自动调整

平台兼容性

xjx-tabs 自定义标签组件

介绍

xjx-tabs 是一个功能强大的自定义标签组件，支持主标签切换和下拉菜单功能，可自定义颜色和样式。适用于需要分类展示内容的场景，如商品分类、内容分类等。

特性

• 支持任意主标签拥有子标签
• 支持任意主标签显示下拉菜单
• 支持主标签显示不同状态的图标
• 自定义颜色和样式
• 支持子标签显示圆形图标
• 统一的事件回调机制

安装方式

在插件市场搜索 xjx-tabs 安装，或者直接导入项目下的 uni_modules/xjx-tabs 文件夹。

基本用法

<template>
  <view>
    <xjx-tabs 
      :tabs="tabs"
      activeColor="#fc0005"
      @tab-click="onTabClick"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 标签数据，包含子标签
      tabs: [
        {
          name: '全部', 
          icon: 'arrow-down', 
          activeIcon: 'arrow-up', // 下拉菜单打开时显示的图标
          subTabs: [
            {name: '全部', icon_text: '省拼宝'}, // 显示圆形图标
            {name: '拼xx'},
            {name: '淘b'},
            {name: '抖y'}
          ]
        },
        {name: '关注'},
        {name: '订阅'},
        {
          name: '我的', 
          icon: 'arrow-down',
          activeIcon: 'arrow-up',
          subTabs: [
            {name: '收藏'},
            {name: '历史'}
          ]
        }
      ]
    }
  },
  methods: {
    // 标签点击事件
    onTabClick(data) {
      console.log('标签点击:', data);
      // 主标签点击时，data包含：index, item, showDropdown
      // 子标签点击时，data包含：index, subIndex, item, subItem, isSubTab
    }
  }
}
</script>

属性说明

tabs 数据结构

[
  {
    name: '标签名称',
    icon: 'arrow-down', // 图标名称，使用uv-icon组件的图标
    activeIcon: 'arrow-up', // 下拉菜单打开时显示的图标，如果不设置则使用icon
    subTabs: [ // 子标签数组，如果没有子标签可以不设置此属性
      {
        name: '子标签名称',
        icon_text: '省拼宝' // 圆形图标内的文字，仅对第一个子标签有效，如果设置则显示圆形图标
      },
      {
        name: '子标签名称2'
      }
    ]
  }
]

事件说明

方法说明

示例

自定义颜色

<xjx-tabs 
  :tabs="tabs"
  activeColor="#007aff"
  inactiveColor="#999999"
/>

只有部分标签有下拉菜单

tabs: [
  {
    name: '全部', 
    icon: 'arrow-down', 
    activeIcon: 'arrow-up',
    subTabs: [
      {name: '全部', icon_text: '省拼宝'},
      {name: '拼xx'},
      {name: '淘b'}
    ]
  },
  {name: '关注'}, // 没有子标签
  {
    name: '我的', 
    icon: 'setting', // 使用不同的图标
    subTabs: [
      {name: '收藏'},
      {name: '历史'}
    ]
  }
]

自定义图标状态

tabs: [
  {
    name: '全部', 
    icon: 'arrow-down', 
    activeIcon: 'close', // 下拉菜单打开时显示关闭图标
    subTabs: [
      {name: '全部', icon_text: '热门'}, // 自定义圆形图标文字
      {name: '拼xx'},
      {name: '淘b'}
    ]
  }
]

注意事项

1. 组件依赖于 uview-ui 的图标组件，请确保项目中已安装 uview-ui。
2. 如需修改更多样式，可以通过覆盖组件的样式类来实现。
3. 子标签的圆形图标只对每个下拉菜单的第一个子标签有效，通过设置 icon_text 属性来显示。

更新日志

v1.2.0 (2024-02-26)

• 优化图标显示逻辑，支持设置不同状态的图标
• 移除 showIcon 属性，改为判断是否有 icon 属性
• 移除 circleText 属性，改为从 subTabs 的 icon_text 属性获取
• 支持为每个下拉菜单的第一个子标签设置不同的圆形图标文字

v1.1.0 (2024-02-25)

• 优化组件结构，支持任意主标签拥有子标签
• 支持任意主标签显示下拉菜单和图标
• 统一事件回调机制，使用tab-click事件替代原来的main-tab-click和sub-tab-select事件

v1.0.0 (2024-02-25)

• 首次发布