导航组件
底部导航 TmTabbar
可定义凸起按钮。通过全局状态设置选中项，放于任何页面可自动选中。
🌶️ 示例
查看模拟效果＋
示例模板
vue
<!--
- Copyright (c) 2025. tmzdy by @https://tmui.design
-->
<script lang="ts" setup>
const outIndex = 2
const list: TM.TABBAR_ITEM_INFO[] = [
{ title: '首页', icon: 'home-smile-2-line', selectedIcon: 'home-smile-2-fill', dotType: 'dot' },
{ title: '分类', icon: 'drive-line', selectedIcon: 'drive-fill' },
{ title: '购物车', icon: 'shopping-basket-line', selectedIcon: 'shopping-basket-fill' },
{ title: '统计', icon: 'bar-chart-2-line', selectedIcon: 'bar-chart-2-fill', dotLabel: '99+' },
{ title: '我的', icon: 'group-line', selectedIcon: 'group-fill' }
]
</script>
<template>
<tm-tabbar
:list="list"
:outIndex="2"
class="mb-24"
color="rgba(0,0,0,0.64)"
out-bg-color="#ffffff"
out-icon-color="#16ee9c"
position="relative"
selected-color="#000000"
>
</tm-tabbar>
</template>
<style scoped>
</style>🌶️ 兼容性
平台兼容
| H5 | uniAPP | 小程序 | version |
|---|---|---|---|
| ☑️ | ☑️ | ☑️ | ☑️ |
🌱 参数
| 参数名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| color | string | '#b9b9b9' | 未选中时的颜色 |
| selectedColor | string | '' | 选中时的颜色，空值取全局主题 |
| bgColor | string | 'white' | 背景,如果你为空，会读取全局的亮色tabbar背景 |
| darkBgColor | string | '' | 暗黑时的背景，如果为空，取全局的底部导航背景色。 |
| showTopBorder | boolean | true | 显示顶部边线，暗黑时取全局的borderDarkColor |
| borderColor | string | '#f0f0f0' | 边线颜色 |
| fontSize | string | '11px' | 文字大小 |
| iconSize | string | '28px' | 图标大小 |
| autoTabbarHeight | number | 0 | 导航的整体高度，请使用v-model:autoTabbarHeight="x"来获取当前的高度。外部要去变更值。这个只是对外输出，给您外部放在底部占位用，省得你们要一屏时计算高。外部最好computed使用，因为是异步的 |
| outIndex | number | 2 | 需要向外凸起的项目索引。-1表示不凸起 |
| outBgColor | string | 'primary' | 凸起的背景色 |
| outIconColor | string | 'white' | 凸起的图标颜色 |
| isOutSpace | boolean | true | 是否开启凸起背景镂空，截止sdk4.31ios有bug官方已经知晓在修复 |
| outReserve | boolean | false | 是否反向凸起就是不镂空，但在凸起的底层会被绘制背景。false是镂空，true表示反向包住。截止sdk4.31ios有bug官方已经知晓在修复 |
| position | string | 'fixed' | 是否悬浮在底部,不可动态修改fixed悬浮，relative静态布局。 |
| linearGradient | string[] | ()=>[] | 渐变背景，如果提供，上面的背景和暗黑背景将失效。仅支持:tobottom,toright,toleft,totop例：['toright','#ff667f','#ff5416'] |
| list | TM.TABBAR_ITEM_INFO[] | ():TM.TABBAR_ITEM_INFO[]=>[] | 如果你提供了本地的list数据，那么全局的list将不会被采用，你需要自己管理激活引，跨页面时需要你自己设置当前页面的索引，因为变量索引是无法跨页面的。 |
| activeIndex | number | -1 | 当前激活的索引,如果你提供了本地索引，那全局的索引将失效。跨页面时需要你自己设置当前页面的索引，因为变量索引是无法跨页面的。仅当月list不为空时有效。 |
| zIndex | number | 20 | 层级 |
| isCanvasRender | boolean | true | 是否开启canvas渲染引擎，开启后，可以得到两种渲染版本请自行选择使用。 |
| containerWidth | number | 750 | 由于微信无法动态理性canvas宽，因此如果你开启isCanvasRender,你就要提供这个，rpx单位全屏是750rpx |
🌹 事件
| 事件名 | 参数 | 返回数据 | 描述 |
|---|---|---|---|
| change | 名称：index,当前选中的索引, | - | 切换项目时触发。 |
| update:autoTabbarHeight | 名称：height,当前组件高度, | - | 同步组件高给外部使用，请使用v-model:autoTabbarHeight |
| 组件高度 = 安全栏高度 + 导航栏高度,外部最好computed使用，因为是异步的 |
🌽 slot插槽
| 插槽名 | 数据 | 描述 |
|---|---|---|
| out | 名称：binding,active 类型：- | |
| 名称：binding,size 类型：- | ||
| - | ||
| item | 名称：binding,activeindex 类型：- | |
| 名称：binding,children 类型：- | ||
| 名称：binding,isactive 类型：- | ||
| 名称：binding,selfindex 类型：- | ||
| - |
🥗 ref方法
| 方法名 | 参数 | 返回值 | 描述 |
|---|