更新记录

0.0.9(2025-07-14) 下载此版本

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

0.0.8(2025-07-01) 下载此版本

  • fix: 修复颜色不生效的问题

0.0.7(2025-07-01) 下载此版本

  • fix: 修复uniapp微信小程序不显示图标的问题
查看更多

平台兼容性

uni-app(4.54)

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
- 5.1
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 快应用-华为 快应用-联盟
- - - - - - - - - -

uni-app x(4.61)

Chrome Safari Android iOS 鸿蒙 微信小程序
5.1

lime-tabbar 标签栏

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

插件依赖:lime-stylelime-sharedlime-badgelime-iconlime-svg

文档链接

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

安装方法

  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-iconicon插槽

<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

参数 说明 类型 默认值
v-model 当前选中标签的名称或索引值 string -
value 当前选中标签的名称或索引值 string -
fixed 是否固定在底部 boolean true
bordered 是否显示外边框 boolean true
placeholder 固定在底部时是否生成占位元素 boolean true
zIndex 元素z-index number 885
shape 标签栏形状,可选round string normal
safeAreaInsetBottom 是否开启底部安全区适配 boolean true
activeColor 选中标签的颜色 string -
color 未选中标签的颜色 string -
activeBgColor 选中标签的背景颜色 string -
iconSize 图标大小 string -
lStyle 样式 string -

Tabbar Events

事件名 说明 回调参数
change 切换标签时触发 active: string

TabbarItem Props

参数 说明 类型 默认值
value 标签值,作为匹配的标识符 string -
icon 图标名称或图片链接,等同于 Icon 组件的 name 属性 string -
disabled 是否禁用 boolean false
label 标签文本 string ``
badgeProps 自定义徽标的属性,传入的对象会被透传给 Badge 组件的 props Object ``

TabbarItem Slots

插槽名 说明
icon 自定义图标

主题定制

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

名称 默认值 描述
--l-tabbar-bg-color $bg-color-container -
--l-tabbar-border-color $border-color-1 -
--l-tabbar-round-shadow $shadow-3 -
--l-tabbar-z-index 10 -
--l-tabbar-height 80rpx -
--l-tabbar-color $text-color-1 -
--l-tabbar-active-color $primary-color -
--l-tabbar-font-size 32rpx -
--l-tabbar-font-size 32rpx -

支持与赞赏

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

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问