Skip to content
On this page

组件库文档 tmui.design

底部导航栏 Tabbar

内部只能放置,tm-tabbar-item。


🌶️ 底部导航栏 Tabbar 示例

查看模拟效果
示例模板
vue
<template>
    <tm-app>
        <tm-sheet>
			<tm-text label="点击中间+按钮可以体验异步加载动态效果."></tm-text>
		</tm-sheet>
		<tm-tabbar :autoSelect="false" v-model:active="acc">
			<tm-tabbar-item @click="acc=0" activeColor="orange" count="HOT"   open-type='reLaunch'  text="首页" icon='tmicon-collection-fill'></tm-tabbar-item>
			<tm-tabbar-item @click="acc=1"  activeColor="orange"  text="表单" icon='tmicon-cog-fill'></tm-tabbar-item>
			<tm-tabbar-item @click="acc=2" :shadow="2" :beforeClick="laodingfun" :data="'中间项'" btn-top fontColor="white" activeColor="white" linear="top" linearDeep="accent" color="yellow" icon="tmicon-plus"></tm-tabbar-item>
			<tm-tabbar-item @click="acc=3" activeColor="orange" url='/pages/fankui/index' text="反馈分类" unicon="tmicon-like" icon="tmicon-heart-fill"></tm-tabbar-item>
			<tm-tabbar-item @click="acc=4"  activeColor="orange" :count="8" url='/pages/chart/index' active text="图表中心" unicon="tmicon-account" icon="tmicon-userplus-fill"></tm-tabbar-item>
		</tm-tabbar>
    </tm-app>
</template>
<script lang="ts" setup>
import { ref, getCurrentInstance } from "vue"
import { onShow, onLoad } from "@dcloudio/uni-app";
import tmApp from "@/tmui/components/tm-app/tm-app.vue"
import tmSheet from "@/tmui/components/tm-sheet/tm-sheet.vue"
import tmText from "@/tmui/components/tm-text/tm-text.vue"
import tmTabbar from "@/tmui/components/tm-tabbar/tm-tabbar.vue"
import tmTabbarItem from "@/tmui/components/tm-tabbar-item/tm-tabbar-item.vue"
const acc = ref(1)
function laodingfun(val){
	return new Promise(res=>{
		setTimeout(function() {
			console.log("选中了:",val)
			res(true)
		}, 2000);
	})
}
</script>

🌶️ 兼容性

APP-VUEAPP-NVUE小程序WEB/H5VUE3/TS
✔️✔️✔️✔️✔️

🌱 参数

本组件含有公共属性 公共属性

参数名类型默认值描述
transprent[Boolean, String]false是否透明
color[String]white背景颜色
text[Boolean]false是否浅色背景
round[Number, String]0圆角0-25,单位rpx
shadow[Number]0投影, 0-25
width[Number]0宽度,单位rpx, 如果为0取当前窗口宽度
bottom[Number]0底部偏移,单位rpx
showSafe[Boolean]false是否显示安全区域
autoSelectv3.0.77+[Boolean]true是否自动通过点击项目来选中项目,默认:true自动。如果设置为false时,则可以通过下方的active双向绑定来手动切换选中项
activev3.0.77+Number-1当前活动荐的索引,从0开始,可以使用v-model:active来双向绑定切换选中项,必须autoSelect设置为false才起效
zIndex[Number]200层级,注意:nvue是没有效果的,需要放到页面最后才能是页面的最顶部。

🌹 事件

方法名参数返回值描述
changev3.0.77+-active通过手动切换选中值时触发本事件。

🌽 slot插槽

默认default,注意:内部只能放置,tm-tabbar-item

🥗 ref方法

方法名参数返回值描述
tmTabbarId
setNowurl
pushKey
delKey

子组件 tm-tabbar-item

🌱 参数

本组件含有公共属性 公共属性

参数名类型默认值描述
blur[Boolean]false是否开启磨砂效果背景
followTheme[Boolean]true是否跟随主题,可选值:false, true
transprentBooleantrue是否透明
colorStringwhite背景主题色
fontColorStringgrey-darken-1文字主题色
activeColorStringprimary激活后的主题色
activeBooleanfalse当前是否是活动项,注意:它不是动态的,只是默认选中的项,它只能通过点击本组件项目来切换
btnTopBooleanfalse是否开启向上凸起的按钮
textString''展示文字
iconString''选中图标
uniconString''未选中时的图标,如果不填写默认使用相同的图标
textSizeNumber20字体大小
iconSizeNumber38icon尺寸
dot[Boolean, String]false是否显示圆点,可选值:false, true
dotColor[String]red圆点颜色
dotIcon[Boolean, String]false圆点使用icon图标
count[Number, String]0count为数字时,显示数字角标,如果为string是显示文本角标
maxCount[Number, String]99最大数值
url[String]""链接地址
openType[String]navigate链接打开方式同官方
beforeClick[Function, Boolean](data)=>false参数:data,为下方自行绑定到属性data上的数据。打开链接之前执行的勾子函数,返回fase阻止打开。也可以返回new Promise
load[Boolean, String]false是否开启异步加载动效,可选值:false, true
datav3.0.63+[Object,Number, String]undefined自义绑定数据到项目上,beforeClick执行时,上下文参数
disabledBooleantrue是否禁用

🌹 事件

事件名参数返回数据描述
click项目被点击时触发
beforeClick点击切换之前执行,如果返回false或者Promise<false>时,将阻止链接的切换。如果没有提供url链接地地址将只作为切换使用

🥗 ref方法

💏 文档贡献

此页文档由ygy贡献(git,github),如果对该框架感兴趣的可以参与我们一同进步!