# Tabbar 底部导航栏

此组件一般用于应用底部导航功能,可动态渲染自定义底部导航栏

# list 数组参数解释

list: [{
	//红色角标显示的数字,如果需要移除角标,配置此参数为0即可
	"count": 0,
	//如果配置此值为true,那么角标将会以红点的形式显示
	"isDot": false,
	//未激活(选中)的图片
	"iconPath": "https://dnvue.dengqichang.cn/file/imgs/tabbar/index.png",
	//激活(选中)的图片
	"selectedIconPath": "https://dnvue.dengqichang.cn/file/imgs/tabbar/indexs.png",
	//显示的提示文字
	"text": "首页"
}]

# 基本使用

通过 list 数据动态渲染整个tabbar页面

<template>
	<view>
		<n-tabbar :list="list"></n-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					"count": 0,
					"isDot": true,
					"iconPath": "https://dnvue.dengqichang.cn/file/imgs/tabbar/index.png",
					"selectedIconPath": "https://dnvue.dengqichang.cn/file/imgs/tabbar/indexs.png",
					"text": "首页"
				}, {
					"count": 2,
					"isDot": false,
					"iconPath": "https://dnvue.dengqichang.cn/file/imgs/tabbar/shopping.png",
					"selectedIconPath": "https://dnvue.dengqichang.cn/file/imgs/tabbar/shoppings.png",
					"text": "购物车"
				}, {
					"count": 0,
					"isDot": false,
					"iconPath": "https://dnvue.dengqichang.cn/file/imgs/tabbar/my.png",
					"selectedIconPath": "https://dnvue.dengqichang.cn/file/imgs/tabbar/mys.png",
					"text": "我的"
				}]
			}
		},
		methods: {

		}
	}
</script>

# 底部导航栏配置 按需配置

通过 config 参数来设置底部导航栏的配置,颜色值可使用DNVUE UI 内置色彩,也可使用#000000类型的颜色值。

<template>
	<view>
		<n-tabbar :list="list" :config="config"></n-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				config: {
					"borderTopColor": "#f5222d" //tabbar上边框的颜色
				}
			}
		},
		methods: {

		}
	}
</script>

# API

# Attribute 参数

参数 说明 类型 可选值 默认值
list 自定义导航栏数据 Array, Object - -
config 底部导航栏配置 Array, Object - -
current 控制当前显示的自定义导航栏页面 String, Number - 0

# Event 事件

事件名 说明 返回值
@change tabbar底部导航栏切换时触发 {index: 当前tabbar下标}

# config 底部导航栏配置

颜色值可使用DNVUE UI 内置色彩,也可使用#000000类型的颜色值。

参数 说明 类型 默认值
color 文本颜色 String $gray-13
selectedColor 选中文本颜色 String $theme-6
backgroundColor 背景颜色 String $gray-1
fontSize 文本大小 String, Number 24
textTop 文本距离图标的距离 String, Number 9
iconSize 图片大小 String, Number 50
height 底部导航栏高度 String, Number 110
borderTopColor tabbar 上边框的颜色 String $gray-5
badgeBackground 角标颜色 String $red-6
badgeColor 角标文本颜色 String $gray-1