T-UVUE-UI1.0.0

Appearance

TabBar 底部导航 ​

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

支持平台 ​

安卓iosweb微信小程序支付宝小程序QQ小程序
√√√xxx

示例 ​

html
<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" :option="tabList2" :badge-attrs="{type:'e', class:'bg.blue-c.#ccc'}"
			@change="onchange"></t-tabbar>
		<t-section title='使用图标+切换主题' class="tdr-tdb-mb.30"></t-section>
		<t-tabbar type='e' :current="current" class="df dlrb.0" :border="true" :option="tabList"
			@change="onchange"></t-tabbar>
	</t-page>
</template>

<script>
	import { TuiTabBarOption } from '@/uni_modules/tui-plus'
	export default {
		data() {
			return {
				iconsrc: "email-fill",
				current: 1,
				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是否有边框Booleantruetrue, false
borderClass边框类名String''-
current当前页索引Number0-
badgeAttrs徽标组件属性UTSJSONObject{}-

Events ​

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