TabBar 底部导航

底部导航，用于创建一个底部标签栏，支持配置标签栏类型、选项数据、激活颜色、未激活颜色、是否有边框、边框类名等

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

示例

<template>
	<t-page title='底部导航(基础版)' class="p.30">
		<t-card class="tdr-tdb-mb.30" title='Tabbar 底部导航' sub-title="页面切换底部菜单"></t-card>
		<t-section title='使用图片' class="tdr-tdb-mb.30"></t-section>
		<t-tabbar class="tdr-tdb-mb.30" :border="true" :option="tabList2"></t-tabbar>
		<t-section title='使用图标+切换主题' class="tdr-tdb-mb.30"></t-section>
		<t-tabbar type='e' class="tdr-tdb-mb.30" :border="true" :option="tabList" @change="onchange"></t-tabbar>
	</t-page>
</template>

<script>
	import { TuiTabBarOption } from '@/uni_modules/t-ui'
	export default {
		data() {
			return {
				iconsrc: "email-fill",
				current: 0,
				tabList2: [{
					activeIcon: '/static/tabbar/ui1.png',
					inactiveIcon: '/static/tabbar/ui.png',
					raised: false,
					label: 'UI',
					badgeValue: 0
				},
				{
					activeIcon: '/static/tabbar/table1.png',
					inactiveIcon: '/static/tabbar/table.png',
					raised: false,
					label: '图表',
					badgeValue: 9999

				},
				{
					activeIcon: '/static/tabbar/api1.png',
					inactiveIcon: '/static/tabbar/api.png',
					raised: true,
					label: '插件',
					badgeValue: 1
				},
				{
					activeIcon: '/static/tabbar/template1.png',
					inactiveIcon: '/static/tabbar/template.png',
					raised: false,
					label: '模版',
					badgeValue: 0
				},
				{
					activeIcon: '/static/tabbar/my1.png',
					inactiveIcon: '/static/tabbar/my.png',
					raised: false,
					label: '我的',
					badgeValue: 0
				}] as TuiTabBarOption[],
				tabList1: [{
					activeIcon: '/static/tabbar/home_s.png',
					inactiveIcon: '/static/tabbar/home.png',
					raised: false,
					label: '首页',
					badgeValue: 0
				},
				{
					activeIcon: '/static/tabbar/find_s.png',
					inactiveIcon: '/static/tabbar/find.png',
					raised: false,
					label: '发现',
					badgeValue: 9999

				},
				{
					activeIcon: 'home-fill',
					inactiveIcon: 'home',
					raised: false,
					label: '购物车',
					badgeValue: 1
				},
				{
					activeIcon: '/static/tabbar/msg_s.png',
					inactiveIcon: '/static/tabbar/msg.png',
					raised: false,
					label: '消息',
					badgeValue: 0
				},
				{
					activeIcon: '/static/tabbar/me_s.png',
					inactiveIcon: '/static/tabbar/me.png',
					raised: false,
					label: '我的',
					badgeValue: 0
				}] as TuiTabBarOption[],
				tabList: [{
					activeIcon: 'home-fill',
					inactiveIcon: 'home',
					raised: false,
					label: '首页',
					badgeValue: 0
				},
				{
					activeIcon: 'play-circle-fill',
					inactiveIcon: 'play-circle',
					raised: false,
					label: '发现',
					badgeValue: 9999

				},
				{
					activeIcon: 'bag-fill',
					inactiveIcon: 'bag',
					raised: false,
					label: '购物车',
					badgeValue: 1
				},
				{
					activeIcon: 'email-fill',
					inactiveIcon: 'email',
					raised: false,
					label: '消息',
					badgeValue: 0
				},
				{
					activeIcon: 'rmb-circle-fill',
					inactiveIcon: 'rmb-circle',
					raised: false,
					label: '我的',
					badgeValue: 0
				}] as TuiTabBarOption[]
			};
		},
		methods: {
			onchange(e : number) {
				console.log(e)
			},
			tabBarClick(index : number) {
				this.current = index
			}
		}
	}
</script>

Props

名称	描述	类型	默认值	可选值
type	标签栏类型	String	'p'	-
option	选项数据	TuiTabBarOption[]	[]	-
activeColor	激活颜色	String	''	-
inactiveColor	未激活颜色	String	'#7D7E80'	-
border	是否有边框	Boolean	true	true, false
borderClass	边框类名	String	''	-

Events

事件名	描述	回调参数
change	标签切换时触发	(index: number)