更新记录

1.0.1（2026-04-09） 下载此版本

优化滑动效果

修复已知问题

更新使用文档

1.0.0（2024-08-22） 下载此版本

首次发布

平台兼容性

uni-app(4.36)

zero-tabs 组件

zero-tabs 是一个支持滚动、自动居中、胶囊高亮、徽章和吸顶的标签选项卡组件，符合 easycom 规范，使用 uni_modules 引入后可直接使用。

一. 组件特性

• 兼容 line、capsule、none 三种模式
• 选中项自动滚动到可视区域中间
• 支持少量 tab 自动均分布局
• 支持图标、禁用态和 badge 徽章
• 支持异步切换和吸顶占位
• 支持 lineOptions、capsuleOptions 两类高亮配置
• 内部不再直接修改传入的 tabs 数据

二. 参数说明

capsuleOptions

lineOptions

badgeOptions

三. 事件

四. 使用示例

<template>
  <view class="tabs">
    <view class="zero-nav-title">基础使用</view>
    <zero-tabs
      :currentIndex="currentIndex"
      :tabs="categoryList"
      :lineOptions="{ width: 36, height: 8, bottom: 8, gap: 12 }"
      @change="handleTabsChange"
    />

    <view class="zero-nav-title">胶囊模式</view>
    <zero-tabs
      :currentIndex="currentIndex"
      :tabs="categoryList"
      slider="capsule"
      selectColor="#ffffff"
      :capsuleOptions="{ color: '#465CFF', radius: 40 }"
      @change="handleTabsChange"
    />

    <view class="zero-nav-title">无滑块 + badge</view>
    <zero-tabs
      :currentIndex="currentIndex"
      :tabs="badgeTabs"
      slider="none"
      :showBadge="true"
      @change="handleTabsChange"
    />
  </view>
</template>

<script setup lang="ts">
  import { ref } from "vue";

  const currentIndex = ref(0);

  const categoryList = ref([
    { name: "推荐" },
    { name: "手机数码" },
    { name: "家用电器", disabled: true },
    { name: "电脑办公" },
    { name: "家居家装" },
    { name: "美妆个护" },
    { name: "服饰鞋包" },
    { name: "母婴童装" },
  ]);

  const badgeTabs = ref([
    { name: "消息", badge: 3 },
    { name: "通知", badge: 18 },
    { name: "系统", badge: 0 },
  ]);

  const handleTabsChange = (index: number) => {
    currentIndex.value = index;
  };
</script>

<style scoped lang="scss">
  .zero-nav-title {
    margin: 40rpx 0 20rpx 20rpx;
  }
</style>

五. 注意事项

• 默认点击流程是“先滚动居中，再切换高亮并触发 change”
• 当 async 为 true 时，组件不会自动更新选中态，需要父组件在 change 后自行更新 currentIndex
• lineOptions.width、capsuleOptions.width 的单位是 px，其他尺寸配置默认使用 rpx

插件预览:

小程序搜索: 零技术

预览的小程序不一定能及时更新当前插件