更新记录

1.0.0（2026-10-16） 下载此版本

新增

• 首次发布
• 通用标签栏组件：type='line' 下划线指示器 / type='capsule' 胶囊高亮
• 灵活数据源：tabs 支持 string 数组或 {title, badge, disabled} 对象数组，可混合
• 支持徽标 badge 与禁用 disabled
• 支持横向滚动 scrollable，自动定位到激活项
• 颜色、高度、字号、指示条尺寸全部可配
• 通过 v-model 双向绑定选中索引，@change 获取 { index, item }

平台兼容性

uni-app(4.0)

ry-tabs 通用标签栏组件

作者：Howe

通用标签栏组件：type='line' 下划线指示器 / type='capsule' 胶囊高亮双形态。tabs 支持字符串或对象混合数组，内建徽标、禁用、横向滚动，颜色尺寸全部可配，一套 API 覆盖顶部页签、分类筛选、轻量导航。

需要 uni-app x（uvue）版本请使用 ry-tabs-x 插件。

安装

三种方式任选其一。

方式一：源码放到 components 目录（推荐）

下载源码后，把组件放到项目的 components/ry-tabs/ry-tabs.vue，保持该目录结构，即符合 easycom 默认规则，Vue3 自动注册，无需任何配置。

页面直接写 <ry-tabs />。

方式二：手动导入

组件放在其他任意位置时，显式导入注册即可，与 easycom 不冲突（显式导入优先生效）：

// <script setup> 中 import 后直接使用，或注册到 components 选项
import ryTabs from '@/components/ry-tabs/ry-tabs.vue'

方式三：uni_modules 导入

通过 HBuilderX 从插件市场导入 uni_modules，组件位于 uni_modules/ry-tabs/components/ry-tabs/ 下，同样自动注册，无需 import。

使用示例

<template>
  <!-- 1. 最简用法：字符串数组 + v-model -->
  <ry-tabs v-model="current" :tabs="['全部', '待付款', '待发货', '已完成']"/>

  <!-- 2. 对象数组：徽标 + 禁用 -->
  <ry-tabs
    v-model="current"
    :tabs="[
      { title: '消息', badge: 8 },
      { title: '通知', badge: 'NEW' },
      { title: '已关闭', disabled: true }
    ]"
  />

  <!-- 3. 胶囊形态 + 自定义主题色 -->
  <ry-tabs v-model="current" type="capsule" active-color="#ff5500" :tabs="tabs"/>

  <!-- 4. 横向滚动（标签过多时） + change 事件 -->
  <ry-tabs v-model="current" :scrollable="true" :tabs="tabs" @change="onChange"/>
</template>

<script setup>
import { ref } from 'vue'
const current = ref(0)
const tabs = [
  { title: '推荐' },
  { title: '热榜' },
  { title: '关注' }
  /* ...更多标签 */
]
const onChange = (e) => {
  console.log('当前索引：', e.index, '当前项：', e.item)
}
</script>

Props

Events

技术支持

• 微信：howe1144（一定在线，紧急问题首选）
• QQ 群：415367029（常规问题，群友互助，作者可能在线）
• ***（很少在线）
• 插件市场评论区：回复不及时，仅适合不着急的留言反馈

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助