uView Tabbar 底部导航栏

优点：

此组件提供了自定义tabbar的能力，具有如下特点：

• 图标可以使用字体图标(内置图标和扩展图标)或者图片
• 可以动态切换菜单的数量以及配置
• 切换菜单之前，可以进行回调鉴权
• 可以设置角标或数字化提示
• 有效防止组件区域高度塌陷，无需给父元素额外的内边距或者外边距来避开导航的区域

#平台差异说明

App（vue）	App（nvue）	H5	小程序
√	√	√	√

#基本使用

推荐您使用list数组遍历循环，案例使用基础方式构建，请根据click事件回调进行后续逻辑操作。

	
	
	
	


value1: 0,
click1(e) {
	console.log('click1', e);
}

copy

#显示徽标

使用dot属性添加--小点--类型徽标，使用badge属性添加--数字--类型徽标。您也可以使用:badge='badge'动态设置徽标数量， 这在消息盒子的展示中是比较好用的功能，

	
	
	
	


value2: 1,

copy

#匹配标签的名称

	
	
	
	


value3: 'play-right',

copy

#自定义图标/颜色

如您需要自定义图标/颜色，在u-tabbar-item标签中使用插槽active-icon和inactive-icon来定义图标和颜色

	
		
		
	
	
	
	


value4: 0,

copy

#拦截切换事件(点击第二个标签)

在切换事件中，处理拦截事件或者您其他js操作逻辑。

	
	
	
	


value5: 0,

change5(name) {
	if (name === 1) return uni.$u.toast('请您先登录')
	else this.value5 = name
},

copy

#边框

组件默认带了顶部边框，如果不需要，配置border为false即可。

	
	
	
	


value7: 3

copy

#固定在底部(固定在屏幕最下方)

与原生效果无异，但您可以按照api配置您需要的其他配置，如徽标，边框等

	
	
	
	


value6: 0,