tui-tabbar 标签栏 开源组件

介绍

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

注：组件内置使用了tui-icon组件，使用时需要将此组件同时引入到项目中，且uni-app中如果不是easycom配置，需要在标签栏组件中手动进行引入图标组件。

使用建议

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="#f8f8f8" :tabBar="tabBar" color="#777" selectedColor="#AC9157" @click="tabbarSwitch"></tui-tabbar>

// data 数据 及 方法
export default {
  data() {
  	return {
  		current: 0,
  		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
  			}
  		]
  	}
  },
  methods: {
  	tabbarSwitch(e) {
  		//获取登录状态，此处默认未登录
  		//跳转切换逻辑需自行实现
  		let isLogin = false;
  		if (e.verify && !isLogin) {
  			this.tui.toast('您还未登录，请先登录');
  		} else {
  			this.current = e.index;
  		}
  	}
  }
}

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

// data 数据 及 方法
Page({
  data: {
    current: 0,
    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
    	}
    ]
  },
  tabbarSwitch(e) {
  	//获取登录状态，此处默认未登录
  	//跳转切换逻辑需自行实现
  	console.log(e)
  	let isLogin = false
  	if (e.detail.verify && !isLogin) {
  	  tui.toast("您还未登录，请先登录")
  	} else {
  	  this.setData({
  		current: e.detail.index
  	  })
  	}
  }
})

// Make sure to add code blocks to your code group

Slots

插槽名称	插槽说明
-	-

Props

属性名	类型	描述	默认值
current	Number	当前tabbar索引	0
color	String	字体颜色	#666
selectedColor	String	字体选中颜色	#5677FC
backgroundColor	String	背景颜色	#FFFFFF
hump	Boolean	是否需要中间凸起按钮	false
iconSize V2.1.0+	[Number, String]	字体图标大小，单位rpx	52
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 选中图片图标地址

name 字体图标名称，使用字体图标时，图片图标失效 V2.1.0+

activeName 选中字体图标名称 V2.1.0+

customPrefix 自定义图标所定义字体class名称，具体可查看tui-icon组件文档 V2.1.0+

iconSize 字体图标大小，单位rpx，不传值则默认使用 props 中 iconSize 值 V2.1.0+

hump 是否为凸起图标

num 角标数值

isDot 角标是否为圆点

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

Events

注：uni-app端绑定事件使用@前缀，如@click；微信小程序原生使用bind前缀，如bindclick

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

预览

特别说明

• 该组件为 开源组件，uni-app版所有用户均可免费使用。
• 微信小程序原生版仅开源至v1.4.2，后续版本需开通会员才可获取使用。

线上程序扫码预览

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