更新记录

0.2.2（2025-07-11） 下载此版本

• fix: 修复与swiper联动在多标签页滚动问题

0.2.1（2025-06-10） 下载此版本

• feat: 增加lStyle自定义节点样式属性

0.2.0（2025-05-30） 下载此版本

• fix: 恢复label插槽导出TabPanel类型

平台兼容性

uni-app(4.44)

uni-app x(4.61)

lime-tabs 选项卡

一个功能丰富的选项卡组件，用于在不同的内容区域之间进行切换，支持：

• 多种展示方式（等分/滚动）
• 手势滑动切换
• 与swiper联动
• 兼容uniapp/uniappx

插件依赖：lime-shared、lime-badge、lime-style

文档链接

📚 组件详细文档请访问以下站点：

• 选项卡文档 - 站点1
• 选项卡文档 - 站点2
• 选项卡文档 - 站点3

安装方法

1. 在uni-app插件市场中搜索并导入lime-tabs
2. 首次导入可能需要重新编译

代码演示

基础使用

通过v-model绑定当前激活标签的索引值，通过list设置选项卡列表。

<l-tabs v-model="value" :list="list" />

const value = ref(0)
const list = [
    {
        value: 1,
        label: '选项一',
    },
    {
        value: 2,
        label: '选项二',
    },
    {
        value: 3,
        label: '选项三',
    },
    {
        value: 4,
        label: '选项四',
    }
]

使用子组件

除了使用list属性，还可以通过l-tab-panel子组件设置标签内容。

<l-tabs v-model="activeTab">
    <l-tab-panel :value="0" label="首页" />
    <l-tab-panel :value="1" label="分类" />
    <l-tab-panel :value="2" label="购物车" />
</l-tabs>

标签栏滚动

当标签数量较多时，可通过设置:space-evenly="false"取消等分布局，实现横向滚动。

<l-tabs :space-evenly="false">
    <l-tab-panel :value="0" label="推荐" />
    <l-tab-panel :value="1" label="关注" />
    <l-tab-panel :value="2" label="热门" />
    <l-tab-panel :value="3" label="体育" />
    <l-tab-panel :value="4" label="科技" />
    <l-tab-panel :value="5" label="财经" />
    <l-tab-panel :value="6" label="娱乐" />
</l-tabs>

徽标提示

支持在标签上显示徽标或小红点，可自定义偏移位置。

<l-tabs :space-evenly="false">
    <l-tab-panel :value="0" label="消息" />
    <!-- 显示小红点 -->
    <l-tab-panel :value="1" label="联系人" :dot="true" />
    <!-- 显示数字徽标 -->
    <l-tab-panel :value="2" label="通知" badge="8" :offset="[-8,3]"/>
    <l-tab-panel :value="3" label="设置" />
</l-tabs>

切换动画

通过:animated="true"开启标签内容切换时的转场动画。

<l-tabs v-model="value" :animated="true">
    <l-tab-panel :value="0" label="选项一">
        <view class="content-panel">选项卡内容1</view>
    </l-tab-panel>
    <l-tab-panel :value="1" label="选项二">
        <view class="content-panel">选项卡内容2</view>
    </l-tab-panel>
    <l-tab-panel :value="2" label="选项三">
        <view class="content-panel">选项卡内容3</view>
    </l-tab-panel>
</l-tabs>

滑动切换

通过:swipeable="true"开启手势左右滑动切换标签页功能。

<l-tabs v-model="value" :animated="true" :swipeable="true">
    <l-tab-panel :value="0" label="选项一">
        <view class="content-panel">向左滑动查看下一个选项</view>
    </l-tab-panel>
    <l-tab-panel :value="1" label="选项二">
        <view class="content-panel">可以左右滑动切换选项</view>
    </l-tab-panel>
    <l-tab-panel :value="2" label="选项三">
        <view class="content-panel">向右滑动查看上一个选项</view>
    </l-tab-panel>
</l-tabs>

受控模式

通过@click事件可以在切换标签前执行特定的逻辑，实现受控切换。

<l-tabs :value="value" @click="onClick">
    <l-tab-panel :value="0" label="选项一">
        <view class="content-panel">选项卡内容1</view>
    </l-tab-panel>
    <l-tab-panel :value="1" label="选项二">
        <view class="content-panel">选项卡内容2</view>
    </l-tab-panel>
    <l-tab-panel :value="2" label="选项三">
        <view class="content-panel">选项卡内容3</view>
    </l-tab-panel>
</l-tabs>

const value = ref(1);
const onClick = (index) => {
    // 在切换前执行一些逻辑，如数据校验
    uni.showLoading({title:'校验中'})
    setTimeout(() => {
        uni.hideLoading()
        value.value = index // 手动更新选中的标签
    }, 1000)
}

快速预览

导入插件后，可以直接使用以下标签查看演示效果：

<!-- 代码位于 uni_modules/lime-tabs/components/lime-tabs -->
<lime-tabs />

插件标签说明

• l-tabs：选项卡容器组件
• l-tab-panel：选项卡面板组件
• lime-tabs：演示标签

Vue2使用说明

插件使用了composition-api，请按官方教程vue-composition-api配置。

关键代码是在main.js中的Vue2部分添加以下代码：

// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

API文档

Tabs Props

Tabs Events

Tabs Slots 插槽

TabPanel Props

主题定制

样式变量

组件提供了以下CSS变量用于自定义样式：

支持与赞赏

如果这个组件对您有帮助，可以考虑支持开发者：

支付宝	微信支付