更新记录
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-style
、lime-shared
、lime-badge
、lime-icon
、lime-svg
文档链接
📚 组件详细文档请访问以下站点:
安装方法
- 在uni-app插件市场中搜索并导入
lime-tabbar
- 首次导入可能需要重新编译
- 在页面中使用
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
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
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 | - |
支持与赞赏
如果你觉得本插件解决了你的问题,可以考虑支持作者: | 支付宝赞助 | 微信赞助 |
---|---|---|
![]() |
![]() |