# 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"
export default {
	components:{
		tuiTabbar
	}
}

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

# 微信小程序引入(可在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
tabBar属性 Object对象参数说明

pagePath 页面路径

text 标题

iconPath 图标地址

selectedIconPath 选中图标地址

hump 是否为凸起图标

num 角标数值

isDot 角标是否为圆点

verify 是否需要先验证 (如登录)

# Events

事件名 说明 回调参数
click tababr切换点击事件 {
  index: 索引值,
  hump: 是否为凸起图标,
  pagePath: 页面路径,
  verify: 是否需要验证
}

# 预览

# 线上程序扫码预览

ThorUI组件库 H5二维码 ThorUI示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码