LimeUI+1.2.0

主题

LimeTabbar 标签栏 ​

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

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

文档链接 ​

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

安装方法 ​

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

注意🔔

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

代码演示 ​

基础使用 ​

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

html
<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>
js
const active = ref('0')

通过值匹配 ​

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

html
<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>
js
const active = ref('home')

徽标提示 ​

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

html
<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>
js
const active = ref('home')

自定义图标 ​

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

html
<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>
js
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 属性设置未选中标签的颜色。

html
<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 事件来监听选中标签的变化。

html
<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>
js
const change = (value : string) => {
	console.log('value', value)
}

Vue2使用说明 ​

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

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

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

快速预览 ​

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

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

插件标签说明 ​

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

API文档 ​

Tabbar Props ​

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

Tabbar Events ​

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

TabbarItem Props ​

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

TabbarItem Slots ​

插槽名说明
icon自定义图标
default默认插槽
extra额外插槽，在文本下方

主题定制 ​

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

变量名称默认值描述
--l-tabbar-bg-color$bg-color-container标签栏背景色
--l-tabbar-border-color$border-color-1标签栏边框颜色
--l-tabbar-round-shadow$shadow-3圆角模式阴影效果
--l-tabbar-z-index10标签栏的 z-index 层级
--l-tabbar-height80rpx标签栏高度
--l-tabbar-round-margin-x16px圆角模式水平外边距
--l-tabbar-item-margin-x0标签项水平外边距
--l-tabbar-item-margin-y8px标签项垂直外边距
--l-tabbar-item-padding-x12px标签项水平内边距
--l-tabbar-item-padding-y0标签项垂直内边距
--l-tabbar-item-crowded-padding-x8px拥挤状态下标签项水平内边距
--l-tabbar-color$text-color-1标签项默认文字颜色
--l-tabbar-active-color$primary-color标签项激活状态文字颜色
--l-tabbar-font-size32rpx标签项默认文字大小
--l-tabbar-min-font-size$font-size-sm标签项最小文字大小
--l-tabbar-active-bg-color$primary-color-1标签项激活状态背景色
--l-tabbar-disabled-opacity0.5禁用状态透明度

支持与赞赏 ​

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

支付宝赞助微信赞助

源代码 ​

组件源码