# tui-tabbar 标签栏

介绍

类似原生tabbar组件，可用于自定义tabbar，非必要情况下建议使用原生tabbar。

使用建议

1、tabbar子页面可做成组件引入，切换组件显示。

2、参考链接案例使用：uni-app使用案例 (opens new window)、微信小程序使用案例 (opens new window)

# 引入

说明

请参考案例使用，以下引入仅为了介绍组件相关属性参数以及事件等。

# uni-app引入

第一种，手动引入（可全局引入）

import tuiTabbar from "@/components/thorui/tui-tabbar/tui-tabbar.vue"
export default {
	components:{
		tuiTabbar
	}
}

第二种，开启easycom组件模式，如果不了解如何配置，可先查看官网文档 (opens new window)。

# uni-app版本平台差异说明

App-Nvue	App-vue	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
升级中	√	√	√	√	√	√	√

# 微信小程序引入（可在app.json中全局引入）

{
  "usingComponents": {
    "tui-tabbar": "/components/thorui/tui-tabbar/tui-tabbar"
  }
}

# 代码演示

部分功能演示，具体可参考示例程序以及文档API。

基础使用

current 属性为当前索引， backdropFilter 属性开启高斯模糊效果[仅在支持的浏览器有效果]，backgroundColor 属性设置背景颜色，tabBar 属性为tabbar列表，color 属性为字体颜色，selectedColor 属性为字体选中颜色，click 为tababr切换点击事件。

<!--uni-app-->
<tui-tabbar :current="current"  backdropFilter :backgroundColor="backgroundColor" :tabBar="tabBar" color="#777" selectedColor="#AC9157" @click="tabbarSwitch"></tui-tabbar>

<!--微信小程序-->
<tui-tabbar current="{{current}}"  backdropFilter backgroundColor="{{backgroundColor}}" tabBar="{{tabBar}}" color="#777" selectedColor="#AC9157" bindclick="tabbarSwitch"></tui-tabbar>

//data 数据
tabBar: [
	{
		pagePath: '/pages/tabbar/index/index',
		text: 'code',
		iconPath: '/static/images/tabbar/code_gray.png',
		selectedIconPath: '/static/images/tabbar/code_active.png'
	},
	{
		pagePath: '',
		text: 'extend',
		iconPath: '/static/images/tabbar/release.png',
		hump: true,
		selectedIconPath: '/static/images/tabbar/release.png'
	},
	{
		pagePath: '/pages/tabbar/my/my',
		text: 'thor',
		iconPath: '/static/images/tabbar/thor_gray.png',
		selectedIconPath: '/static/images/tabbar/thor_active.png',
		num: 2,
		isDot: true,
		verify: true
	}
]

# Slots

none

# Props

参数	类型	描述	默认值
current	Number	当前tabbar索引	0
color	String	字体颜色	#666
selectedColor	String	字体选中颜色	#5677FC
backgroundColor	String	背景颜色	#FFFFFF
hump	Boolean	是否需要中间凸起按钮	false
isFixed	Boolean	是否固定在底部	true
tabBar	Array	tabbar列表	[]
badgeColor	String	角标字体颜色	#fff
badgeBgColor	String	角标背景颜色	#F74D54
unlined	Boolean	去掉顶部细线	false
backdropFilter	Boolean	是否开启高斯模糊效果[仅在支持的浏览器有效果]	false
zIndex	[Number, String]	z-index值，isFixed为true时生效	9999