更新记录

0.0.1（2026-03-11） 下载此版本

Changelog

All notable changes to this project will be documented in this file.

0.2.0 (2026-03-11)

• Unify to single component tab.vue (global tag: pluis-tab)
• Add title-left and title-right slots for custom icons/content
• Ellipsis applied to title text only; threshold-based max-width
• Add sticky, visibleCount, elevator features and demos
• Async interception with loading prompts and KeepAlive caching
• Documentation updates: README, USAGE and plugin packaging guide
• Add MIT LICENSE.md

0.1.0 (2026-03-11)

• Initial project structure and demo page
• Basic tabs implementation and global registration

平台兼容性

uni-app(4.61)

pluis-tabs

统一的跨端 Tabs 组件（统一文件名：tab.vue，标签名：pluis-tab），支持父传子数据驱动、异步拦截、KeepAlive 缓存、吸顶、等宽展示、长标题省略、电梯定位、动画与手势滑动。

安装与引入

• 将 uni_modules/pluis-tabs 复制到项目的 uni_modules 目录
• 全局注册已在 main.js 完成：pluis-tabs-pro 可直接使用

基本使用

<pluis-tab
  v-model="active"
  :tabs="tabs"
  :animated="true"
  :swipeable="true"
  :ellipsis="false"
  :asyncTabs="[2]"
  :beforeChange="handleBeforeChange"
  KeepAlive
  showLoading
  loadingText="正在切换..."
  lineColor="#ee0a24"
  titleActiveColor="#ee0a24"
>
  <template v-slot:content="{tab}">
    <view>{{ tab.content }}</view>
  </template>
  <!-- 标题左/右插槽：可放图标、自定义节点 -->
  <template v-slot:title-left="{tab, index, active}">
    <text style="margin-right: 8rpx">★</text>
  </template>
  <template v-slot:title-right="{tab, index, active}">
    <text style="margin-left: 8rpx">✦</text>
  </template>
</pluis-tab>

Tabs 数据结构

[{ title: '首页', name: 0, content: '首页内容', async: false }]

• title：标题文本
• name：唯一标识（索引或字符串）
• content：示例内容（实际业务中可通过 slot 自定义）
• async：是否对该项启用异步拦截

Props

• value / modelValue：当前激活 name（支持 v-model）
• color / lineColor：指示线颜色（默认红色）
• titleActiveColor / titleInactiveColor：标题选中/未选中颜色
• animated：内容横向滑动动画
• swipeable：手势左右滑动
• ellipsis：开启长标题省略
• ellipsisThreshold：超过该字数时省略（默认 6），并按字数计算 max-width
• visibleCount：导航等宽显示 N 个（其余横向滚动）
• sticky / stickyTop：导航吸顶；距离顶部（rpx/px）
• elevator / elevatorOffset：点击标题滚动定位到对应面板
• async / asyncTabs / beforeChange：异步拦截（函数返回布尔或 Promise）
• KeepAlive / keepAlive：缓存策略（true/索引/索引数组/名称）
• showLoading / loadingText：异步期间显示加载提示
• rootClass / navClass / titleClass / contentClass / lineClass：样式覆盖类名
• Slots：
  • content：面板内容插槽，作用域 { tab, index }
  • title-left：标题左侧插槽，作用域 { tab, index, active }
  • title-right：标题右侧插槽，作用域 { tab, index, active }

发布到插件市场（打包指引）

• 插件包：请用标准 zip 压缩，避免使用非标准压缩方式
• 使用说明：md 文件采用 utf-8 编码，图片建议上传到云存储后引用，避免本地路径导致显示异常
• 示例工程：提供可运行的完整 uni-app 示例；如需更新示例，请先在“云存储”中替换 apk 或静态资源后重新上传
• 许可证：默认 MIT，如需收费或闭源请在根目录添加 license.md 并在使用说明中说明
• 资源规范：尽量避免超大图片与非必要的二进制资源，提升审核与下载体验

事件

• change：激活项变化（返回激活 name）
• before-change（可选）：异步拦截事件，payload 含 { from, to, tab, proceed }

示例

• 基本：异步 + 全局 KeepAlive + 动画
• 吸顶：sticky 启用
• 仅展示 4 个：visibleCount=4
• 超 6 字省略号：ellipsis=true, ellipsisThreshold=6（超出按 28rpx/字 + 64rpx padding 计算 max-width 并应用 ...）
• 电梯：elevator=true 点击标题滚动定位

设计要点

• 轨道与视口分离：内容滑动在 track 上，避免高度塌缩
• 指示线位置使用累计宽度计算，统一 px；rpx 通过窗口宽度换算
• 懒渲染 + 访问记忆，性能与体验兼顾