template-project/components/foot-tabs

第一步：引入组件

import footTab from '@/components/foot-tabs/foot-tab.vue';

第二步：注册组件

export default {
	components:{
		footTab
	}
}

第三步：使用组件

<template>
	<view>
		<foot-tab
			current="0"
			isIcon="2"
			backgroundImage=""
		></foot-tab>
	</view>
</template>

参数说明

current：当前选中项，默认0表示第一项
isIcon：哪个图标突出，默认2表示从索引0开始数，第二个图标突出
backgroundImage：底部导航背景图片，默认空值
backgroundColor：背景颜色，默认#FFFFFF
isGradualChange：是否开启背景颜色渐变，默认开启
direction：渐变方向，默认right top
colorOne：第一种颜色，默认#FFFFFF
colorTwo：第二种颜色，默认#FFFFFF
colorThree：第三种颜色，默认#FFFFFF
colorFour：第四种颜色，默认#FFFFFF
boxShadowNum：阴影大小0~1之间 0表示没有阴影，默认0.1