更新记录

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

• 首个版本：以 csr-tab 的 API 为基线重构，value / tabList / rangeKey / bgColor / defaultColor / activeColor / scroll 与 change 事件保持兼容，老项目可平替。
• 新增 Vue3 支持（modelValue + update:modelValue），同一份代码兼容 Vue2 / Vue3。
• 新增 cross-tab.nvue，支持 app-nvue 页面，文字统一 包裹。
• 新增 mode：line / underline / pill / bold / none 五种指示样式。
• 新增角标（badge / count，>99 显示 99+）、禁用项（disabled）、图标（icon）。
• 新增 theme="auto" 暗黑模式跟随、sticky 吸顶、left / right 插槽。
• 新增横向滚动时选中项自动居中，以及 setCurrent(index, emitChange) 方法。

平台兼容性

uni-app(3.8.7)

其他

cross-tab 多平台选项卡

csr-tab 的重构升级版。同一个 <zeng-cross-tab> 标签在 H5、App-vue、App-nvue、小程序 上表现一致，Vue2 / Vue3 项目都能直接 v-model。

相比 csr-tab 的改进

指示条采用「每个选项自带一条 + scaleX 缩放」的方式实现，不依赖 DOM 测量，因此小程序端不会出现首次进入定位偏移、异步测量抖动这类问题。

兼容性

🟡 = 按各端能力约束实现，尚未在该端实测；发布前建议至少跑一遍微信开发者工具与 iOS/Android 真机。

快速开始

# 方式一：HBuilderX 菜单「插件市场」导入 uni_modules
# 方式二：把 uni_modules/zeng-cross-tab 整个目录拷到项目根下的 uni_modules/ 里

无需注册，easycom 自动引入：

<template>
  <zeng-cross-tab v-model="current" :tab-list="tabs" @change="onChange" />
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      tabs: ['热帖推荐', '最新帖子', '最多访问', '最多回复']
    }
  },
  methods: {
    onChange(index, item) {
      console.log(index, item)
    }
  }
}
</script>

对象数组（角标、禁用、图标）：

tabs: [
  { name: '关注', badge: 6 },
  { name: '推荐', badge: 128 },        // 自动显示 99+
  { name: '同城', icon: '📍' },        // icon 支持 emoji 或 iconfont 字符
  { name: '草稿', disabled: true }      // 置灰不可点
]

<zeng-cross-tab v-model="current" :tab-list="tabs" range-key="name" mode="pill" />

与 swiper 联动

<template>
  <zeng-cross-tab ref="tab" :value="current" :tab-list="tabs" @change="onTab" />
  <swiper :current="current" @change="onSwiper">
    <swiper-item v-for="(item, i) in tabs" :key="i">{{ item }} 的内容</swiper-item>
  </swiper>
</template>

<script>
export default {
  data: () => ({ current: 0, tabs: ['A', 'B', 'C'] }),
  methods: {
    onTab(index) {
      this.current = index
    },
    onSwiper(e) {
      this.current = e.detail.current
    }
  }
}
</script>

属性

事件

方法

插槽

注意

1. nvue 版没有 sticky、插槽与系统主题实时监听（进入页面时读取一次），其余属性一致。
2. 长标签在等分模式下超出选项宽度会显示省略号，需要完整展示时把 scroll 打开或调大 fontSize 对应的 itemHeight 宽度。
3. 角标颜色固定为 #fa5151，需要换色请改 zeng-cross-tab.vue / zeng-cross-tab.nvue 里的 .ct__badge。
4. 组件不申请任何系统权限、不采集任何数据、不含广告。

许可

MIT