更新记录

0.1.1（2025-07-18） 下载此版本

• feat：修复ellipsis

0.1.0（2025-07-18） 下载此版本

• feat：增加ellipsis,文本超过一行使用省略号

0.0.9（2025-07-14） 下载此版本

• fix：修复插槽icon不生效问题

平台兼容性

云端兼容性

uni-app(4.54)

uni-app x(4.75)

lime-tabbar 标签栏

用于在不同功能模块之间进行快速切换，位于页面底部。兼容uniapp/uniappx。

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

文档链接

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

• tabbar文档 - 站点1
• tabbar文档 - 站点2
• tabbar文档 - 站点3

安装方法

1. 在uni-app插件市场中搜索并导入lime-tabbar
2. 首次导入可能需要重新编译
3. 在页面中使用l-tabbar组件（组件）或lime-tabbar（演示）

::: tip 注意🔔 本插件依赖的【lime-svg】是原生插件，如果购买(收费为6元)则需要自定义基座，才能使用， 若不需要删除即可 :::

代码演示

基础使用

v-model 默认绑定选中标签的索引值，通过修改 v-model 即可切换选中的标签。

<l-tabbar v-model="active">
    <l-tabbar-item icon="home">首页</l-tabbar-item>
    <l-tabbar-item icon="app">应用</l-tabbar-item>
    <l-tabbar-item icon="chat">聊天</l-tabbar-item>
    <l-tabbar-item icon="user">我的</l-tabbar-item>
</l-tabbar>

const active = ref('0')

通过值匹配

在标签指定 value 属性的情况下，v-model 的值为当前标签的 value。

<l-tabbar v-model="active">
    <l-tabbar-item icon="home" value="home">首页</l-tabbar-item>
    <l-tabbar-item icon="app" value="app">应用</l-tabbar-item>
    <l-tabbar-item icon="chat" value="chat">聊天</l-tabbar-item>
    <l-tabbar-item icon="user" value="user">我的</l-tabbar-item>
</l-tabbar>

const active = ref('home')

徽标提示

设置 lime-badge插件的 badgeProps 在图标右上角展示相应的徽标。

<l-tabbar v-model="active">
    <l-tabbar-item icon="home" :badgeProps="{ content: 16, max:5 }" value="home">首页</l-tabbar-item>
    <l-tabbar-item icon="app"  :badgeProps="{ dot: true }" value="app">应用</l-tabbar-item>
    <l-tabbar-item icon="chat" :badgeProps="{ content: 'New', offset: [10,-2] }" value="chat">聊天</l-tabbar-item>
    <l-tabbar-item icon="user" :badgeProps="{ content: '···' }" value="user">我的</l-tabbar-item>
</l-tabbar>

const active = ref('home')

自定义图标

设置icon属性可设置图标，图标可看 lime-icon或icon插槽。

<l-tabbar v-model="active">
    <l-tabbar-item icon="home" value="home">
        <template #icon>
            <image style="width: 20px;height: 20px;" v-show="active == 'home'" :src="activeImg" ></image>
            <image style="width: 20px;height: 20px;" v-show="active != 'home'" :src="inactiveImg" ></image>
        </template>
    </l-tabbar-item>
    <l-tabbar-item icon="app"  value="app">应用</l-tabbar-item>
    <l-tabbar-item icon="chat" value="chat">聊天</l-tabbar-item>
    <l-tabbar-item icon="user" value="user">我的</l-tabbar-item>
</l-tabbar>

const active = ref('home')
const activeImg = 'https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png'
const inactiveImg = 'https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png'

自定义颜色

通过 active-color 属性设置选中标签的颜色，通过 color 属性设置未选中标签的颜色。

<l-tabbar activeColor="red" color="#999">
    <l-tabbar-item icon="home" value="home"></l-tabbar-item>
    <l-tabbar-item icon="app" value="app"></l-tabbar-item>
    <l-tabbar-item icon="chat" value="chat"></l-tabbar-item>
    <l-tabbar-item icon="user" value="user"></l-tabbar-item>
</l-tabbar>

监听切换事件

通过 change 事件来监听选中标签的变化。

<l-tabbar v-model="active" @change="change">
    <l-tabbar-item icon="home" value="home"></l-tabbar-item>
    <l-tabbar-item icon="app" value="app"></l-tabbar-item>
    <l-tabbar-item icon="chat" value="chat"></l-tabbar-item>
    <l-tabbar-item icon="user" value="user"></l-tabbar-item>
</l-tabbar>

const change = (value : string) => {
    console.log('value', value)
}

Vue2使用说明

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

关键配置代码（在main.js中添加）：

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

快速预览

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

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

插件标签说明

• l-tabbar：标签栏组件
• lime-tabbar：演示标签

API文档

Tabbar Props

Tabbar Events

TabbarItem Props

TabbarItem Slots

主题定制

组件提供了下列 CSS 变量，可用于自定义样式。

支持与赞赏

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